/* CSS Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px; /* Base font size */
    background-color: var(--primary-bg); /* ADDED */
    min-height: 100%; /* ADDED */
}

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Poppins:wght@400;600;700;800&display=swap');

/* CSS Custom Properties (Variables) */
:root {
    --primary-bg: #0D1B2A; /* Oxford Blue */
    --secondary-bg: #1C2B3A; /* Dark Gunmetal */
    --accent-color: #00F6FF; /* Bright Cyan */
    --accent-hover: #50F9FF; /* Slightly lighter cyan for hover */
    --primary-text: #F5F5F5; /* Off-White */
    --secondary-text: #BDBDBD; /* Light Gray for less important text */
    --border-color-subtle: #345678; /* Subtle blue-gray for borders */
    --card-shadow: rgba(0, 0, 0, 0.3);
    --accent-glow-shadow: rgba(0, 246, 255, 0.2);

    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Open Sans', sans-serif;

    --std-padding: 20px;
    --std-margin: 20px;
    
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;

    --transition-speed: 0.3s;
}

/* Apply some root variables to body early */
body {
    font-family: var(--font-body);
    background: linear-gradient(135deg, var(--primary-bg) 0%, var(--secondary-bg) 100%); /* Applied gradient */
    min-height: 100vh; /* Ensures gradient covers full viewport height */
    background-attachment: fixed; /* Gradient stays fixed during scroll */
    color: var(--primary-text);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}/* Global Styles */
.container {
    width: 90%;
    max-width: 1100px; /* Standard max width for content */
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--primary-text);
    margin-bottom: 0.75em;
    line-height: 1.3;
}

h1 { font-size: 2.8rem; font-weight: 800;}
h2 { font-size: 2.2rem; font-weight: 700; color: var(--accent-color);}
h3 { font-size: 1.6rem; font-weight: 600;}
h4 { font-size: 1.2rem; font-weight: 600;}

p {
    margin-bottom: 1em;
    color: var(--secondary-text); /* Default paragraph to secondary text for softer look */
}
p.lead, .lead > p { /* For lead paragraphs that need more emphasis */
    color: var(--primary-text);
    font-size: 1.15rem;
}


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

a:hover, a:focus {
    color: var(--accent-hover);
    text-decoration: none; /* Or an underline if preferred */
}

ul, ol {
    margin-bottom: 1em;
    padding-left: 20px; /* Default padding for lists */
}

/* Add a class for active navigation links if needed for global styling */
.active-link {
    color: var(--accent-hover) !important;
    font-weight: bold;
}/* Navigation & Footer Styling */
/* Site Header */
.site-header {
    padding: var(--std-padding) 0;
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: transparent; /* Made completely transparent */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px); /* For Safari */
    transition: box-shadow var(--transition-speed) ease; /* Only transition shadow if it changes on scroll */
    /* A very subtle shadow might be good for the base state too, or only on .navbar-scrolled */
    /* box-shadow: 0 1px 2px rgba(0,0,0,0.05); */
}

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

.site-logo {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-text);
    text-decoration: none;
}
.site-logo:hover {
    color: var(--accent-hover);
}

/* Scrolled state for header (mainly for landing page) */
.site-header.navbar-scrolled {
    /* background-color: var(--secondary-bg); REMOVED - header is always semi-transparent */
    box-shadow: 0 2px 8px rgba(0,0,0,0.15); /* A slightly softer, more subtle shadow for the glass edge */
}/* Desktop Navigation */
.main-nav {
    display: none; /* Hidden by default, shown in media query for larger screens */
}

.main-nav ul {
    list-style: none;
    display: flex;
    padding-left: 0; /* Override global ul padding */
    margin-bottom: 0; /* Override global ul margin */
}

.main-nav li {
    margin-left: 25px;
}

.main-nav a {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    color: var(--secondary-text);
    text-decoration: none;
    padding: 5px 0;
    position: relative; /* For underline pseudo-element */
}

.main-nav a::after {
    content: '';
    position: absolute;
    bottom: -2px; /* Position underline slightly below text */
    left: 0;
    width: 0; /* Initially no width */
    height: 2px;
    background-color: var(--accent-color);
    transition: width var(--transition-speed) ease;
}

/* Underline animation on hover/active */
.main-nav a:hover::after,
.main-nav a.active::after { /* .active class to be added by JS or HTML for current page */
    width: 100%;
}

.main-nav a:hover,
.main-nav a.active {
    color: var(--primary-text); /* Text color change on hover/active */
}

/* Show main-nav on larger screens (example breakpoint) */
@media (min-width: 769px) { /* Adjust breakpoint as needed */
    .main-nav {
        display: flex; /* Show desktop nav */
    }
}/* Mobile Navigation Toggle (Hamburger Icon) */
.mobile-nav-toggle {
    display: none; /* Hidden by default, shown in media query for smaller screens */
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 10px; /* Easier to tap */
    margin: 0; /* Reset margin */
    z-index: 1010; /* Above header content, below overlay */
    position: relative; /* For absolute positioning if needed for alignment */
}

.mobile-nav-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--primary-text);
    margin: 5px 0;
    border-radius: 1px; /* Slightly rounded ends */
    transition: all var(--transition-speed) ease-in-out;
}

/* Hamburger animation to "X" when mobile nav is active */
/* JS will add an 'is-active' class to the toggle button or a class to body */
.mobile-nav-toggle.is-active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.mobile-nav-toggle.is-active span:nth-child(2) {
    opacity: 0;
}
.mobile-nav-toggle.is-active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}/* Mobile Navigation Overlay Structure & Transition */
.mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(13, 27, 42, 0.95); /* Primary BG with opacity */
    backdrop-filter: blur(5px); /* Frosted glass effect - check browser support */
    -webkit-backdrop-filter: blur(5px); /* For Safari */
    z-index: 1005; /* Below toggle, above other content */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-100%); /* Start off-screen */
    transition: opacity var(--transition-speed) ease-in-out,
                visibility var(--transition-speed) ease-in-out,
                transform var(--transition-speed) ease-in-out;
}

.mobile-nav-overlay.is-open { /* JS adds this class to open */
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}/* Mobile Navigation Overlay Links */
.mobile-nav-overlay nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.mobile-nav-overlay nav li {
    margin: 20px 0;
}

.mobile-nav-overlay nav a {
    font-family: var(--font-heading);
    font-size: 1.8rem; /* Larger for easy tapping */
    font-weight: 700;
    color: var(--primary-text);
    text-decoration: none;
    padding: 10px;
    display: block;
    transition: color var(--transition-speed) ease;
}

.mobile-nav-overlay nav a:hover,
.mobile-nav-overlay nav a.active { /* Assuming JS might add .active here too */
    color: var(--accent-hover);
}

/* Show mobile-nav-toggle and ensure desktop main-nav is hidden on smaller screens */
@media (max-width: 768px) { /* Same breakpoint as hiding desktop nav */
    .main-nav {
        display: none !important; /* Ensure desktop nav is hidden */
    }
    .mobile-nav-toggle {
        display: block; /* Show hamburger */
    }
}/* Site Footer */
.site-footer {
    background-color: var(--secondary-bg); /* Or a darker shade like #0A1421 */
    color: var(--secondary-text);
    padding: calc(var(--std-padding) * 1.5) 0; /* Slightly more padding for footer */
    text-align: center;
    margin-top: calc(var(--std-margin) * 2); /* Space above the footer */
    font-size: 0.9rem;
    border-top: 1px solid var(--border-color-subtle); /* Subtle top border */
}

.site-footer .container p {
    margin-bottom: 0; /* Remove default p margin if only one p in footer */
    color: var(--secondary-text); /* Ensure consistent color */
}

.site-footer a {
    color: var(--accent-color);
    font-weight: 600; /* Make footer links slightly bolder */
}

.site-footer a:hover {
    color: var(--accent-hover);
    text-decoration: underline; /* Add underline on hover for footer links */
}/* Landing Page Specifics - CSS Chunk 3 */
/* Part A.1: Hero Section Base & Typography */
.hero-section {
    min-height: 70vh; /* Make hero take up significant viewport height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: calc(var(--std-padding) * 3) var(--std-padding); /* Generous padding */
    /* background: linear-gradient(135deg, var(--primary-bg) 0%, var(--secondary-bg) 80%); REMOVED */
    position: relative; /* For potential pseudo-elements or decorations */
    overflow: hidden; /* If using any decorative elements that might overflow */
}

/* .hero-section .container will align content within it if needed, handled by global .container */

.hero-section h1 {
    font-size: 3.5rem; /* Larger for landing page */
    font-weight: 800;
    color: var(--primary-text);
    margin-bottom: 0.5em;
    /* Optional: Text shadow for a subtle "pop" */
    /* text-shadow: 0 2px 4px rgba(0,0,0,0.2); */
}

.hero-section .tagline {
    font-size: 1.5rem;
    font-weight: 400; /* Lighter than h1 */
    color: var(--accent-color); /* Use accent for tagline */
    margin-bottom: 1em;
}

.hero-section .welcome-message {
    font-size: 1.1rem;
    color: var(--secondary-text);
    max-width: 600px; /* Keep welcome message from getting too wide */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0; /* Remove bottom margin if arrow is present */
}/* Part A.2: Hero Section Arrow Animation & Responsive */
/* Optional: Add a subtle animated down-arrow or scroll invitation */
.hero-section::after {
    content: '↓'; /* Or an SVG icon for better visuals */
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2rem;
    color: var(--accent-color);
    opacity: 0.7;
    animation: bounceArrow 2.5s infinite ease-in-out;
    transition: opacity 0.3s ease-out; /* Added transition */
}

@keyframes bounceArrow {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
        /* Opacity removed from keyframes, will be controlled by base style and class */
    }
    50% {
        transform: translateX(-50%) translateY(-15px);
        /* Opacity removed from keyframes */
    }
}

/* Adjust hero text sizes for smaller screens */
@media (max-width: 768px) {
    .hero-section {
        min-height: 60vh; /* Adjust height for mobile */
        padding: calc(var(--std-padding) * 2.5) var(--std-padding);
    }
    .hero-section h1 {
        font-size: 2.5rem; /* Responsive font size */
    }
    .hero-section .tagline {
        font-size: 1.25rem; /* Responsive font size */
    }
    .hero-section .welcome-message {
        font-size: 1rem; /* Responsive font size */
    }
    .hero-section::after { /* Optional: hide or adjust arrow on mobile */
        font-size: 1.8rem;
        bottom: 20px;
    }
}/* Part B: Landing Page Navigation Hub Section and Grid Layout */
.navigation-hub {
    padding: calc(var(--std-padding) * 2.5) 0; /* Generous padding above and below the grid */
    /* background-color: var(--primary-bg); Removed */
}

/* .navigation-hub .container is handled by global .container styles */

.hub-grid {
    display: grid;
    /* On mobile (default), 1 column. On tablet & desktop, 2 columns for prominent cards. */
    grid-template-columns: 1fr; /* Default to 1 column for mobile-first */
    gap: calc(var(--std-padding) * 1.5); /* Gap between cards */
}



/* Optional: For very large desktops, if we wanted 4 columns (adjust card styling if so)
@media (min-width: 1200px) {
    .hub-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--std-padding); // May need smaller gap for 4 columns
    }
}
*/

/* Styles for individual hub-card will come in the next chunk *//* Part C.1: Hub Card Base, Hover, Icon Placeholder Base */
.hub-card {
    background-color: var(--secondary-bg);
    padding: calc(var(--std-padding) * 1.5) var(--std-padding); /* Adjust padding */
    border-radius: var(--border-radius-lg); /* e.g., 12px */
    box-shadow: 0 5px 15px var(--card-shadow);
    text-align: center;
    text-decoration: none; /* Remove underline from link */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between; /* Distribute space for icon, title, text */
    transition: transform var(--transition-speed) ease,
                box-shadow var(--transition-speed) ease,
                border-color var(--transition-speed) ease;
    border: 2px solid transparent; /* For hover effect border */
    min-height: 220px; /* Ensure cards have some minimum height */
    color: var(--primary-text); /* Default text color for card content */
}

.hub-card:hover,
.hub-card:focus-visible { /* Use focus-visible for better accessibility */
    transform: translateY(-10px) scale(1.02); /* Subtle scale */
    box-shadow: 0 12px 30px var(--accent-glow-shadow); /* Enhanced glow effect */
    border-color: var(--accent-color);
}

.hub-card .hub-card-icon {
    font-size: 2.8rem; /* Placeholder size */
    color: var(--accent-color);
    margin-bottom: calc(var(--std-margin) * 0.75);
    line-height: 1; /* Ensure icon aligns well */
}/* Part C.2: Hub Card Icon Specifics (Unicode examples), Text, Focus */
/* Placeholder styling for icons using Unicode characters via pseudo-elements */
/* These require the .hub-card-icon div to be empty in HTML if using ::before */
#hub-about .hub-card-icon::before { content: "👤"; /* User Icon - Placeholder */ }
#hub-skills .hub-card-icon::before { content: "🛠️"; /* Tools Icon - Placeholder */ }
#hub-projects .hub-card-icon::before { content: "💼"; /* Briefcase Icon - Placeholder */ }
#hub-contact .hub-card-icon::before { content: "✉️"; /* Envelope Icon - Placeholder */ }
/* Note: Actual SVG icons or a font icon library would be more robust and scalable. */

.hub-card h3 {
    font-size: 1.5rem; /* Card title */
    color: var(--primary-text);
    margin-top: 0; /* Reset margin if icon provides enough space */
    margin-bottom: 0.5em;
}

.hub-card p {
    font-size: 0.95rem; /* Teaser text */
    color: var(--secondary-text);
    margin-bottom: 0; /* No margin for the teaser text */
    line-height: 1.5;
    /* flex-grow: 1; Removed, as justify-content on parent should handle distribution if needed */
}

/* Ensure high contrast for focus states for accessibility */
.hub-card:focus { /* Standard focus for keyboard users, if :focus-visible not fully supported or preferred */
    outline: none; /* Remove default, rely on border or shadow set in :focus-visible */
}
.hub-card:focus-visible { /* Modern focus indicator for keyboard users, already partially styled by hover */
    outline: 3px solid var(--accent-hover); /* Explicit outline for focus-visible */
    outline-offset: 3px;
}/* Content Pages Styling - CSS Chunk 4 */
/* Part A.1: Content Page Container & Section Base */

.page-content-container {
    padding-top: var(--std-padding); /* Adjusted: for spacing after page-hero-banner */
    padding-bottom: calc(var(--std-padding) * 2.5);
    /* Global .container class handles max-width and horizontal centering */
    /* This class will now likely be applied to a div *inside* <main>, below the page-hero-banner */
}

.page-content-container section {
    margin-bottom: calc(var(--std-margin) * 2.5); /* More space between sections */
    padding: calc(var(--std-padding) * 1.5); /* Generous padding within sections */
    background-color: rgba(28, 43, 58, 0.6); /* Secondary BG with some transparency */
    border-radius: var(--border-radius-lg); /* Consistent rounded corners */
    box-shadow: 0 4px 12px rgba(0,0,0,0.25); /* Slightly more defined shadow */
}/* Part A.2.i: Content Page Headings (H1, H2, H3) */
/* Styling for H1 page titles within .page-content-container is now primarily handled by .page-hero-banner h1 */
/*
.page-content-container h1 { 
    font-size: 3rem; 
    color: var(--primary-text);
    margin-bottom: var(--std-margin);
    padding-bottom: calc(var(--std-padding) * 0.6);
    border-bottom: 3px solid var(--accent-color);
    display: inline-block; 
    letter-spacing: 0.5px;
}
*/

.page-content-container h2 { /* Section Titles within pages */
    font-size: 2rem;
    color: var(--accent-color);
    margin-top: calc(var(--std-margin) * 1.5); /* Add top margin for spacing */
    margin-bottom: var(--std-margin);
    letter-spacing: 0.3px;
}

.page-content-container h3 { /* Sub-section Titles */
    font-size: 1.4rem; /* Adjusted size */
    color: var(--primary-text);
    margin-top: var(--std-margin);
    margin-bottom: calc(var(--std-margin) * 0.75);
}/* Part A.2.ii: Content Page Paragraphs & Lists */
.page-content-container p {
    color: var(--secondary-text);
    line-height: 1.8; /* Good for readability */
    margin-bottom: var(--std-margin); /* Consistent bottom margin */
}

.page-content-container p.lead {
    color: var(--primary-text);
    font-size: 1.2rem;
    font-weight: 400; /* Normal weight for lead, size gives emphasis */
}

.page-content-container ul,
.page-content-container ol {
    padding-left: 0; /* Remove default padding, will add to li for custom bullet alignment */
    color: var(--secondary-text);
    margin-bottom: var(--std-margin);
    list-style: none; /* Remove default bullets for custom styling on ul */
}
.page-content-container ol { 
    list-style: decimal; /* Keep ol styling simple */
    padding-left: calc(var(--std-padding) * 2); /* Indent OL numbers */
}


.page-content-container li {
    margin-bottom: calc(var(--std-margin) * 0.4); /* Spacing between list items */
    position: relative;
}

/* Specific padding for ul li to accommodate custom bullet */
.page-content-container ul li {
    padding-left: calc(var(--std-padding) * 1.5); /* Increased padding for custom bullet + text */
}

.page-content-container ul li::before { /* Custom bullets for ul */
    content: "▹"; /* Or '▸', '◉', '✓' */
    color: var(--accent-color);
    font-size: 1.2em; /* Relative to li font size */
    position: absolute;
    left: 0px; /* Align custom bullet to the very left of li's padding box */
    top: 0.05em; /* Fine-tune vertical alignment (adjust as needed) */
    line-height: 1; /* Ensure consistent line height for the bullet itself */
}/* Part B: Specific Component Styles */
/* B.1: Skills Page Styling */

.skills-list {
    display: flex;
    flex-wrap: wrap; /* Allow skills to wrap to next line */
    gap: var(--std-margin); /* Gap between skill items */
    padding-left: 0; /* Override global ul padding if .skills-list is a ul */
    list-style: none; /* Remove bullets if .skills-list is a ul */
    margin-top: var(--std-margin); /* Add some space above the skills list */
}

.skill-item {
    background-color: var(--primary-bg); /* Darker than section bg for contrast */
    color: var(--primary-text);
    padding: var(--std-padding) calc(var(--std-padding) * 1.2);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-color-subtle);
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease, border-color var(--transition-speed) ease; /* Added border-color to transition */
    flex-basis: 100%; /* Always full width for single column */
    text-align: center;
    min-height: 100px; /* Give items some base height */
    display: flex; /* For centering content vertically if needed */
    flex-direction: column;
    justify-content: center;
}

.skill-item:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 12px 30px var(--accent-glow-shadow); /* Consistent with hub-card */
    border-color: var(--accent-color); /* Remains consistent */
}

.skill-item h3 { /* Skill name */
    font-size: 1.2rem;
    color: var(--accent-color);
    margin-bottom: 0.5em; /* Space between skill name and potential description */
    margin-top: 0; /* Reset top margin for h3 inside skill-item */
}

.skill-item p { /* Optional description for a skill */
    font-size: 0.9rem;
    color: var(--secondary-text);
    margin-bottom: 0;
}

/* B.2.i: Project List Grid & Project Item Base/Hover */
.project-list {
    display: grid;
    grid-template-columns: 1fr; /* Default to 1 column for mobile */
    gap: calc(var(--std-margin) * 1.5);
    padding-left: 0;
    list-style: none; /* If project-list is a ul/ol */
    margin-top: var(--std-margin);
}



.project-item {
    background-color: var(--primary-bg); /* Darker than section bg for distinct cards */
    border: 1px solid var(--border-color-subtle);
    border-radius: var(--border-radius-md);
    padding: var(--std-padding);
    box-shadow: 0 3px 8px rgba(0,0,0,0.2);
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease, border-color var(--transition-speed) ease;
    display: flex;
    flex-direction: column; /* Ensure content flows top-to-bottom */
    /* Consider min-height if consistent card height is desired across rows */
}

.project-item:hover {
    transform: translateY(-10px) scale(1.02); /* Consistent with hub-card */
    box-shadow: 0 12px 30px var(--accent-glow-shadow); /* Consistent with hub-card */
    border-color: var(--accent-color); /* Remains consistent */
}/* B.2.ii: Project Item Content (Title, Desc, Tech, Links) */
.project-item h2 { /* Project Title */
    font-size: 1.5rem; /* Override default .page-content-container h2 for project cards */
    color: var(--accent-color);
    margin-top: 0; /* Reset top margin */
    margin-bottom: 0.5em;
}

.project-item .project-description {
    font-size: 0.95rem;
    color: var(--secondary-text);
    margin-bottom: var(--std-margin);
    flex-grow: 1; /* Allows description to take available space if card heights vary */
    line-height: 1.6;
}

.project-item .project-tech {
    font-size: 0.85rem;
    color: var(--primary-text); /* Brighter for tech tags */
    margin-bottom: var(--std-margin);
}

.project-item .project-tech strong {
    color: var(--accent-hover); /* Highlight "Technologies used:" text */
}

.project-item .project-links {
    margin-top: auto; /* Push links to the bottom of the card */
    padding-top: var(--std-padding);
    border-top: 1px solid var(--border-color-subtle); /* Separator for links */
    display: flex;
    flex-wrap: wrap; /* Allow links to wrap if many */
    gap: var(--std-padding);
}

.project-item .project-links a { /* Basic link styling until .btn is defined */
    color: var(--accent-color);
    font-weight: 600;
}
.project-item .project-links a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}/* B.3: Contact Page Styling (contact.html) */
.contact-list {
    list-style: none;
    padding-left: 0; /* Remove default ul padding */
    margin-top: var(--std-margin);
}

.contact-list li {
    padding: var(--std-padding) 0; /* Vertical padding for each contact item */
    border-bottom: 1px solid var(--border-color-subtle);
    display: flex;
    align-items: baseline; /* Align icon/label with link text */
    gap: calc(var(--std-padding) * 0.75); /* Space between icon/label and link */
    font-size: 1.1rem;
}

.contact-list li:first-child {
    padding-top: calc(var(--std-padding) * 0.5); /* Less padding for the first item if needed */
}

.contact-list li:last-child {
    border-bottom: none; /* No border for the last item */
}

.contact-list strong { /* For labels like "Email:", "GitHub:" */
    color: var(--primary-text);
    font-weight: 600;
    flex-shrink: 0; /* Prevent label from shrinking if link is long */
    min-width: 80px; /* Give labels a minimum width for alignment */
}

.contact-list a {
    color: var(--accent-color);
    font-weight: 400; /* Normal weight for links */
    word-break: break-all; /* Break long URLs or emails if necessary */
    text-decoration: none; /* Ensure no underline by default from global 'a' styles if not desired here */
}

.contact-list a:hover {
    color: var(--accent-hover);
    text-decoration: underline; /* Add underline on hover for clarity */
}

/* Optional: Add icons to contact list items - basic structure */
/* This would typically involve adding a specific class or an <i> tag with an icon font/SVG */
/* For example, if using ::before on the <li> and specific classes:
.contact-list li.email-contact::before { content: '✉️'; margin-right: 10px; color: var(--accent-color); }
.contact-list li.github-contact::before { content: '🔗'; margin-right: 10px; color: var(--accent-color); }
*//* B.4: General Button Styling */
.btn {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1rem;
    text-align: center;
    text-decoration: none;
    color: var(--primary-bg); /* Text color that contrasts with accent bg */
    background-color: var(--accent-color);
    padding: 0.75em 1.5em; /* Use em for padding relative to font-size */
    border-radius: var(--border-radius-md);
    border: 2px solid transparent; /* For focus/hover consistency */
    cursor: pointer;
    transition: background-color var(--transition-speed) ease,
                color var(--transition-speed) ease,
                transform var(--transition-speed) ease,
                box-shadow var(--transition-speed) ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    line-height: 1.2; /* Ensure consistent line height */
}

.btn:hover,
.btn:focus-visible {
    background-color: var(--accent-hover); /* Stays for primary button */
    color: var(--primary-bg); /* Stays for primary button */
    transform: translateY(-3px) scale(1.02); /* Standardized but subtle */
    box-shadow: 0 6px 15px var(--accent-glow-shadow); /* Standardized glow, adjusted intensity */
    text-decoration: none; 
}

.btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}

/* Secondary Button Style (e.g., for "Source Code" links) */
.btn.btn-secondary {
    background-color: transparent;
    color: var(--accent-color);
    border-color: var(--accent-color);
}

.btn.btn-secondary:hover,
.btn.btn-secondary:focus-visible {
    background-color: var(--accent-color); /* Fill on hover */
    color: var(--primary-bg);
    border-color: var(--accent-color); /* Keep border consistent on hover fill */
}/* CSS Chunk 5: Animations & Global Responsive Design */
/* Part A: Scroll-Reveal Animation Classes */

/* Initial state for elements that will animate on scroll */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px); 
    transition: opacity 0.6s cubic-bezier(0.645, 0.045, 0.355, 1), 
                transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    will-change: opacity, transform; 
}

/* State when element becomes visible (JS will add this class) */
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0); 
}

/*
   Example usage in HTML:
   <section class="animate-on-scroll">...</section>
   <div class="hub-card animate-on-scroll">...</div>
   <article class="project-item animate-on-scroll">...</article>
*/

/* Optional utility classes for staggered delays (if JS doesn't handle delay directly) */
/* These can be added to elements along with .animate-on-scroll */
.delay-100ms.is-visible { transition-delay: 0.1s !important; }
.delay-200ms.is-visible { transition-delay: 0.2s !important; }
.delay-300ms.is-visible { transition-delay: 0.3s !important; }
.delay-400ms.is-visible { transition-delay: 0.4s !important; }
.delay-500ms.is-visible { transition-delay: 0.5s !important; }

/*
  A note on global responsive text:
  Most responsive text adjustments have been handled at the component level
  (e.g., .hero-section h1, navigation links).
  If a global reduction in base font size is desired for very small screens,
  it could be done like this, but test thoroughly as it affects all rem/em units:

@media (max-width: 400px) { // Example for very small devices
    html {
        // font-size: 15px; // Slightly reduce base font size
    }
}
  For now, we will rely on component-level responsive typography.
*//* Utility class to prevent body scroll when mobile menu is open */
body.no-scroll {
    overflow: hidden;
}/* Updated Site Logo Styling for SVG with Hover Effects */
.site-logo {
    text-decoration: none;
    display: inline-block;
    vertical-align: middle; /* Aligns logo nicely with nav text */
    line-height: 1;
    padding: 0.3rem; 
    border-radius: var(--border-radius-sm); /* This can remain for the <a> tag's shape */
    /* border: 2px solid transparent; REMOVED */
    transition: transform var(--transition-speed) ease; /* Only transform for the <a> tag itself */
}

.site-logo:hover,
.site-logo:focus,
.site-logo:focus-visible {
    transform: translateY(-10px) scale(1.02); /* Exactly matches hub-card transform */
    /* border-color: var(--accent-color); REMOVED */
    /* The 'color' property is removed as the new SVG has its own internal colors */
    outline: none; /* Remove default focus outline if custom filter glow/border provides enough indication */
}

.site-logo-svg {
    display: block; /* Removes extra space below if treated as inline */
    height: 4rem;   /* Increased height for more detail visibility */
    /* Calculate width based on new SVG's aspect ratio (200 wide / 150 high = 4/3) */
    width: calc(4rem * (200 / 150)); /* Results in 4rem width */
    /* The SVG's internal width/height attributes will scale down to fit this CSS box */
}/* Apply SVG filter for glow effect on logo hover/focus */
.site-logo .logo-graphics-group {
    transition: filter var(--transition-speed) ease-out; /* Use your defined --transition-speed */
}

.site-logo:hover .logo-graphics-group,
.site-logo:focus .logo-graphics-group,
.site-logo:focus-visible .logo-graphics-group {
    filter: url(#logoGlowEffect);
}/* Adjust main content area for fixed header */
main {
    padding-top: 130px; /* Increased to accommodate actual fixed header height (approx 114px) + spacing */
}/* Hero Banner for Content Pages */
.page-hero-banner {
    display: flex;
    align-items: center;
    justify-content: center; 
    text-align: center;
    padding: calc(var(--std-padding) * 3) var(--std-padding) calc(var(--std-padding) * 2); 
    min-height: 20vh; 
    /* background: linear-gradient(135deg, var(--primary-bg) 0%, var(--secondary-bg) 80%); REMOVED */
    color: var(--primary-text);
    margin-bottom: calc(var(--std-margin) * 1.5); 
}

.page-hero-banner .container { /* Ensure container is used if content needs to be constrained */
    width: 100%; /* Allow h1 to be centered within the full width of the banner */
}

.page-hero-banner h1 {
    font-size: 2.8rem; /* Prominent page title */
    color: var(--primary-text);
    margin-bottom: 0; /* No extra margin below the title in the banner */
    padding-bottom: calc(var(--std-padding) * 0.5);
    border-bottom: 3px solid var(--accent-color);
    display: inline-block; /* Border only spans text width */
    letter-spacing: 0.5px;
}/* Shape-conforming border effect for SVG logo on hover/focus */
.site-logo .logo-graphics-group > path[fill*="url(#bgGradient)"] {
    stroke: transparent; /* No stroke in normal state */
    stroke-width: 0px;   /* No stroke width in normal state */
    transition: stroke var(--transition-speed) ease-out, 
                stroke-width var(--transition-speed) ease-out;
}

.site-logo:hover .logo-graphics-group > path[fill*="url(#bgGradient)"],
.site-logo:focus .logo-graphics-group > path[fill*="url(#bgGradient)"],
.site-logo:focus-visible .logo-graphics-group > path[fill*="url(#bgGradient)"] {
    stroke: var(--accent-color);
    stroke-width: 3px; /* Adjust for desired thickness, e.g., 3px or 4px */
}/* Shape-conforming border effect for SVG logo on hover/focus */
.site-logo .logo-graphics-group > path[fill*="url(#bgGradient)"] {
    stroke: transparent; /* No stroke in normal state */
    stroke-width: 0px;   /* No stroke width in normal state */
    transition: stroke var(--transition-speed) ease-out, 
                stroke-width var(--transition-speed) ease-out;
}

.site-logo:hover .logo-graphics-group > path[fill*="url(#bgGradient)"],
.site-logo:focus .logo-graphics-group > path[fill*="url(#bgGradient)"],
.site-logo:focus-visible .logo-graphics-group > path[fill*="url(#bgGradient)"] {
    stroke: var(--accent-color);
    stroke-width: 3px; /* Adjust for desired thickness, e.g., 3px or 4px */
}/* Ensure body has full-page gradient background (appended rule) */
body {
    font-family: var(--font-body);
    background: linear-gradient(135deg, var(--primary-bg) 0%, var(--secondary-bg) 100%); /* Applied gradient */
    min-height: 100vh; /* Ensures gradient covers full viewport height */
    background-attachment: fixed; /* Gradient stays fixed during scroll */
    color: var(--primary-text);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}/* Homepage Hero Content Load Animation */
.hero-section h1,
.hero-section .tagline,
.hero-section .welcome-message {
    opacity: 0;
    transform: scale(0.95) translateY(20px); /* Initial state: slightly small, down, and transparent */
    transition-property: opacity, transform;
    transition-duration: 0.7s; /* Slightly longer duration for a smoother feel */
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* easeOutQuad */
}

/* State when .hero-elements-loaded is added to .hero-section itself */
.hero-section.hero-elements-loaded h1,
.hero-section.hero-elements-loaded .tagline,
.hero-section.hero-elements-loaded .welcome-message {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* Stagger the animations */
.hero-section.hero-elements-loaded .tagline {
    transition-delay: 0.2s;
}

.hero-section.hero-elements-loaded .welcome-message {
    transition-delay: 0.4s;
}/* Initially hide the navigation hub until first scroll */
.hub-initially-hidden {
    opacity: 0 !important; /* Ensure it stays hidden */
    visibility: hidden; /* Also hide from layout calculations until scroll */
    pointer-events: none; /* Prevents interaction while hidden */
    /* The existing .animate-on-scroll class will handle the transition 
       to opacity: 1 and transform: translateY(0) once this class is removed 
       and .is-visible is added by the Intersection Observer. */
}.hero-section.scrolled-past-arrow::after {
    opacity: 0; /* Removed !important */
}