/*
|--------------------------------------------------------------------------
| Consolidated Stylesheet: main.css
|--------------------------------------------------------------------------
| Combines all modular CSS files for single-request performance.
| Focus: Simplicity, Mobile-First, CSS Grid/Flex for layout.
*/

/* A. ROOT, RESET & BASE */
:root {
    /* Color Palette */
    --color-primary: #006064; /* Dark Cyan - Main Accent */
    --color-secondary: #2C3E50; /* Very Dark Blue/Slate - Text/Headers */
    --color-text-dark: #4A6572; /* Dark Slate Gray */
    --color-text-light: #ecf0f1; /* Light Gray */
    --color-background: #ffffff; /* Pure White */
    --color-sidebar: #f5f7fa; /* Light background for sidebar */
    --color-card-bg: #ffffff; /* Card Background */
    --color-accent: #1A1A1A; /* Black for emphasis/CTA */

    /* Typography */
    --font-primary: 'Ubuntu', sans-serif;
    --font-secondary: 'Montserrat', sans-serif;

    /* Sizing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 32px;
    --border-radius: 2px;
    --border-thickness: 2px;
    --header-height: 60px;
}

/* Global Reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth; /* Smooth scroll for back-to-top */
}

body {
    font-family: var(--font-primary);
    color: var(--color-text-dark);
    line-height: 1.6;
    background-color: var(--color-background);
}

/* Base Typography */
h1, h2, h3, h4 {
    font-family: var(--font-secondary);
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-dark);
}

h2 { 
    border-bottom: 2px solid var(--color-sidebar); 
    padding-bottom: var(--spacing-sm); 
}

p, ul, ol {
    margin-bottom: var(--spacing-md);
}

a {
    color: var(--color-primary);
    text-decoration: none;
    position: relative;
}

a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px; /* Adjust thickness here if needed, 1px is a good start */
    background-color: currentColor; /* Inherits the link color */
    transform: scaleX(0); /* Hidden initially */
    transform-origin: right; /* Start scaling from the right edge */
    transition: transform 0.3s ease-out; /* Define animation speed and curve */
}

a:hover::after {
    transform: scaleX(1); /* Expands to full width */
}

ul {
    list-style-type: none;
}

/* B. LAYOUT > Section Styling */
.section {
    padding: var(--spacing-md);
    /* Consistent subtle lift for all content sections */
    /* Light shadow from the color scheme brainstorm */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); 
    margin-bottom: var(--spacing-lg);
    background-color: var(--color-background);
    border-radius: var(--border-radius); /* Apply rounding */
}

.container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--spacing-md);
    background-color:#f9fafb;
}

/* Header & Sticky */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--header-height);
    background-color: transparent;
    backdrop-filter: blur(1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-bottom: var(--border-thickness) solid var(--color-text-dark);
    border-left: var(--border-thickness) solid var(--color-text-dark);
    z-index: 1000;
}

.sticky-header {
    position: sticky;
    top: 0;
}

.header .name {
    font-family: var(--font-secondary);
    font-weight: 700;
    font-size: 1.2em;
    color: var(--color-text-dark);
}

/* Footer */
.footer {
    text-align: center;
    padding: var(--spacing-md) 0;
    margin-top: var(--spacing-lg);
    border-top: 1px solid var(--color-sidebar);
    font-size: 0.85em;
    color: var(--color-text-dark);
}

/* Main Content Wrapper (Mobile: Stacked) */
.main-content {
    display: flex;
    flex-direction: column; /* Stack sidebar and content on mobile */
    gap: var(--spacing-lg);
    padding-top: var(--spacing-lg);
}

/* Sidebar (Mobile: Full Width, Top of Content) */
.sidebar {
    background-color: var(--color-sidebar);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    order: -1; /* Place sidebar before content on mobile */
}

.sidebar #profile-image-container {
    text-align: center;
    margin-bottom: var(--spacing-md);
}

.sidebar .profile-image {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--color-primary);
}

.sidebar #contact-info-container ul {
    list-style: none;
    padding: 0;
}

/* Desktop/Tablet Layout (Min-width: 768px) */
@media (min-width: 768px) {
    .main-content {
        /* Use Grid for the primary CV layout */
        display: grid; 
        grid-template-columns: minmax(200px, 1fr) 3fr; /* Flexible columns for Sidebar/Content */
        gap: var(--spacing-lg);
    }
    .sidebar {
        position: sticky; /* Keep sidebar visible */
        top: calc(var(--header-height) + var(--spacing-md)); 
        height: fit-content;
        order: initial; /* Restore order */
/*
        border-bottom: var(--border-thickness) solid var(--color-text-dark);
        border-left: var(--border-thickness) solid var(--color-text-dark);
*/
    }
    .header .name {
        font-size: 1.5em;
    }
}


/* C. COMPONENTS */

/* Navigation */
.burger-button {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--color-text-dark);
    z-index: 10; /* Ensures it's above non-menu elements */
    /* Transition added for smooth visibility changes */
    transition: opacity 0.3s, visibility 0.3s;
}

.header.menu-is-open .burger-button {
    visibility: hidden;
    opacity: 0;
}

.nav-menu {
    /* Desktop Navigation: Hidden on mobile, shown via JS on desktop */
    display: none; 
}

/* Mobile Menu (Off-Canvas Style controlled by JS) */
.mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 33%;
    height: 100%;
    border-left: var(--border-thickness) solid var(--color-text-dark);
    background-color: transparent;
    backdrop-filter: blur(2px);
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    z-index: 2000;
    padding: var(--header-height) var(--spacing-md);
}

.mobile-menu.is-open {
    transform: translateX(0);
}

.mobile-menu .nav-item {
    display: block;
    padding: var(--spacing-md) 0;
    color: var(--color-text-dark);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Close Button (New dedicated control) */
.close-button {
    position: absolute;
    top: var(--spacing-xs);
    right: calc(var(--spacing-sm) * 1);
    background: none;
    border: none;
    font-size: 1.7em;
    color: var(--color-secondary);
    cursor: pointer;
    padding: var(--spacing-sm);
    /* Since it's inside the z-index 2000 menu, it's safe. No need for explicit z-index 2001. */
}

/* Navigation List inside the mobile menu */
#mobile-navigation ul {
    list-style: none;
    padding: 0;
    margin-top: 50px; /* Space for the new close button */
}

#mobile-navigation li {
    margin: var(--spacing-md) 0;
}

#mobile-navigation a {
    display: block;
    padding: var(--spacing-sm) 0;
    font-size: 1.2em;
    font-weight: 500;
    color: var(--color-text-dark);
}

/* Buttons */
.btn-primary, .btn-secondary {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius);
    font-weight: 700;
    transition: background-color 0.2s;
    text-align: center;
    cursor: pointer;
    margin-right: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-text-light);
    border: 1px solid var(--color-primary);
}

.btn-primary:hover {
    background-color: var(--color-secondary);
    color: var(--color-text-light);
    text-decoration: none;
}

.btn-secondary {
    background-color: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

.btn-secondary:hover {
    background-color: var(--color-primary);
    color: var(--color-text-light);
    text-decoration: none;
}

/* Cards & Animation */
.card-animate {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-animate:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

/* Forms */
.contact-form .form-group {
    margin-bottom: var(--spacing-md);
}

.contact-form label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: 500;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    width: 100%;
    padding: var(--spacing-sm);
    border: 1px solid #ccc;
    border-radius: var(--border-radius);
    font-family: var(--font-primary);
}

/* D. UTILITY & PAGE SPECIFIC STYLES */

hr {
    border: 0;
    border-top: 1px solid var(--color-sidebar);
    margin: var(--spacing-lg) 0;
}

/* CV Page Specific */
.skill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.tag {
    background-color: var(--color-primary);
    color: var(--color-text-light);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius);
    font-size: 0.85em;
    white-space: nowrap;
}

.job-entry, .education-entry {
    border-left: var(--border-thickness) solid var(--color-primary);
    border-bottom: var(--border-thickness) solid var(--color-primary);
    padding-left: var(--spacing-md);
    margin-left: calc(var(--spacing-md) * -1); /* NEW: Pulls element left by 16px */
    margin-bottom: var(--spacing-md);
}

.job-dates {
    font-style: italic;
    color: #7f8c8d;
    margin-bottom: var(--spacing-sm);
}

/* Projects Page Specific */
.portfolio-grid {
    /* Use Grid for the projects layout */
    display: grid;
    gap: var(--spacing-lg);
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.project-card {
    background-color: var(--color-card-bg);
    border: 1px solid var(--color-sidebar);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border-left: var(--border-thickness) solid var(--color-text-dark);
    border-bottom: var(--border-thickness) solid var(--color-text-dark);
    margin-left: calc(var(--spacing-md) * -1);
}

.project-tech-stack {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin: var(--spacing-md) 0;
    padding: 0;
}

.tech-tag {
    background-color: #bdc3c7;
    color: var(--color-text-dark);
    padding: var(--spacing-xs);
    border-radius: var(--border-radius);
    font-size: 0.75em;
}

.status-tag {
    font-style: italic;
}

.learning-list .learning-entry {
    padding-left: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.learning-entry {
    border-left: var(--border-thickness) solid var(--color-text-dark);
    border-bottom: var(--border-thickness) solid var(--color-text-dark);
    margin-left: calc(var(--spacing-md) * -1);
}

/* Consult Page Specific */
.md-spacer-lg {
    /* Use a larger margin, for example, twice the standard paragraph margin */
    margin-bottom: calc(var(--spacing-md) * 2); 
    height: 0; /* No height needed for the element itself */
    display: block;
}

.consult .fa-solid, 
.consult .fa-regular {
    color: var(--color-primary); /* Use the primary accent color */
    margin-right: var(--spacing-sm); /* Add spacing after the icon */
    font-size: 1em; /* Ensure icon size matches text */
}

.consult ul, 
.consult ol {
    /* Reintroduce bullet points for unordered lists */
    list-style-type: disc; 
    /* Add padding/margin to make space for the bullet points and indent the list */
    padding-left: var(--spacing-lg); /* 32px padding on the left */
    margin-bottom: var(--spacing-md);
}

/* Ensure list items also have correct line spacing */
.consult li {
    margin-bottom: var(--spacing-sm); /* 8px spacing between list items */
}

/* Special styling for the 'Support Topics' which are highly nested */
/* Optional: Slightly increase padding for nested lists */
.consult ul ul {
    padding-left: var(--spacing-lg); 
}

/* Back to Top Button */
.back-to-top {
    position: fixed;
    bottom: var(--spacing-lg);
    right: var(--spacing-lg);
    width: 40px;
    height: 40px;
    background-color: var(--color-text-dark);
    color: var(--color-text-light);
    border: none;
    border-radius: 50%;
    font-size: 1.5em;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: none; /* Initial state, controlled by JS */
    z-index: 1000;
}

.back-to-top:hover {
    background-color: var(--color-primary);
}

/* Calendar/Booking Page iframe */
#booking-container iframe {
    width: 100%;
    /* Height is set in JS, but ensure it's responsive */
    max-width: 100%; 
}