/* GLOBAL SETTINGS */
:root {
    --primary-color: #C28E0E; /* Purdue Old Gold */
    --text-dark: #333;
    --bg-light: #fff;
    --nav-bg: #2C2C2C;
    --nav-text: #fff;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    color: var(--text-dark);
    line-height: 1.6;
    background-color: #f9f9f9; /* <--- ADD THIS LINE */
}

/* HEADER & NAVIGATION */
header {
    background-color: var(--nav-bg);
    padding: 20px 0;
    text-align: center;
}

header h1 {
    color: white;
    margin: 0;
    font-size: 2rem;
}

header .subtitle {
    display: none;
    color: #ccc;
    margin: 5px 0 20px 0;
    font-weight: 300;
}

/* Navigation Bar */
nav {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

nav a {
    color: #fff;
    text-decoration: none;
    font-size: 1.1rem;
    padding: 8px 16px;
    border-radius: 4px;
    transition: background 0.3s;
}

nav a:hover, nav a.active {
    background-color: var(--primary-color);
    color: #000;
}

/* MAIN CONTAINER */
.container {
    max-width: 900px;
    margin: 40px auto; /* Centers the content */
    padding: 0 20px;
}

/* SECTIONS & TYPOGRAPHY */
h2 {
    color: var(--primary-color);
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    margin-top: 40px;
}

/* Buttons */
.btn-download {
    display: inline-block;
    background-color: var(--primary-color);
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
}
.btn-download:hover { opacity: 0.9; }

/* --- DROPDOWN MENU STYLING --- */

/* The Container - positions the menu relative to this box */
.dropdown {
    position: relative;
    display: inline-block;
}

/* The Button - matches your other nav links */
.dropbtn {
    background-color: transparent;
    color: white;
    padding: 8px 16px;
    font-size: 1.1rem;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: inherit; 
}

/* The Dropdown Box (Hidden by default) */
.dropdown-content {
    display: none; 
    position: absolute;
    background-color: #333; /* Dark background to match nav */
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
    z-index: 9999; /* Sit on top of everything */
    top: 100%; /* Position directly below the button */
    left: 0;
    border-radius: 4px;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    border-bottom: 1px solid #444; /* faint separator line */
}

/* Hover effects */
.dropdown-content a:hover {
    background-color: var(--primary-color);
    color: black;
}

/* THE TRIGGER: Show menu when hovering the container */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Click support for mobile/tablet */
.dropdown:focus-within .dropdown-content {
    display: block;
}
/* --- SMART MARKDOWN STYLING --- */

/* 1. Target the profile image specifically */
#markdown-content img[src*="profile"] {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--primary-color);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    
    /* FLOAT LEFT puts it to the side so text wraps around it */
    float: left;
    margin-right: 40px; 
    margin-bottom: 20px;
}

/* 2. Target the paragraphs to add spacing */
#markdown-content p {
    margin-bottom: 1.5em;
}

/* 3. "About Me" Header (The First Heading) */
/* We explicitly tell the first header NOT to clear, so it sits next to the photo */
#markdown-content h2:first-of-type {
    margin-top: 0;
    clear: none; 
}

/* 4. "Education" Header (All Future Headings) */
/* We tell any header that ISN'T the first one to start on a fresh line */
#markdown-content h2:not(:first-of-type) {
    clear: both;
    padding-top: 20px;
    border-top: 2px solid #eee; /* Adds a nice separator line above Education */
}

/* 5. Mobile Layout - Stack them */
@media (max-width: 700px) {
    #markdown-content img[src*="profile"] {
        float: none;      /* Stop floating */
        display: block;   /* Be a block */
        margin: 0 auto 20px auto; /* Center it */
    }
    
    #markdown-content {
        text-align: center; 
    }
    
    #markdown-content h2 {
        text-align: center;
    }
}
/* HORIZONTAL SPLIT FOR JOBS/EDUCATION */
.job-header {
    display: flex;               /* Activates the layout mode */
    justify-content: space-between; /* Pushes items to far left and far right */
    align-items: baseline;       /* Aligns the text on the same line */
    width: 100%;                 /* Ensures it takes up the full width */
    margin-bottom: 5px;          /* Adds a little space below */
}

/* Optional: Make the date look distinct */
.job-header .date {
    color: #666;             /* Grey color */
    font-weight: normal;     /* Not bold */
    font-size: 0.95rem;      /* Slightly smaller */
    text-align: right;       /* Ensures right alignment on mobile */
}

/* CARDS FOR SECTIONS */
.card {
  background: white;
  padding: 30px;
  margin-bottom: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  border: 1px solid #eee;
}

/* --- COLLAPSIBLE SECTIONS (FOLDABLE BOXES) --- */

/* The container box */
details {
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

/* The clickable title bar */
summary {
    cursor: pointer;
    font-weight: bold;
    color: var(--primary-color); /* Uses your Gold color */
    font-size: 1.1rem;
    list-style: none; /* Hides default triangle */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Custom Plus/Minus signs */
summary::after {
    content: '+'; 
    font-size: 1.5rem;
    font-weight: bold;
    color: #666;
}

details[open] {
    border-color: var(--primary-color); /* Gold border when open */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

details[open] summary {
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

details[open] summary::after {
    content: '-';
}

/* --- IMAGE + TEXT LAYOUT --- */

/* Container that holds Image on left, Text on right */
.entry-layout {
    display: flex;
    gap: 20px;           /* Space between image and text */
    align-items: flex-start; /* Align to top */
}

/* The Image Style */
.entry-thumb {
    width: 150px;        /* Fixed width */
    height: auto;        /* Auto height */
    border-radius: 4px;
    border: 1px solid #eee;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    flex-shrink: 0;      /* Prevents image from getting squished */
    object-fit: cover;   /* Ensures nice cropping */
}

/* Mobile Layout: Stack them vertically */
@media (max-width: 600px) {
    .entry-layout {
        flex-direction: column;
        align-items: center;
    }
    
    .entry-thumb {
        width: 100%;     /* Full width on phone */
        max-width: 300px;
        margin-bottom: 15px;
    }
}