/* Reset and base styles */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; max-width: 1200px; margin: 0 auto; padding: 20px; }
h1, h2 { color: #2c3e50; }
ul { list-style: none; }
a { text-decoration: none; color: #3498db; }
a:hover { text-decoration: underline; }

/* Header and Top Menu */
header { background: #ecf0f1; padding: 10px 0; margin-bottom: 20px; border-bottom: 2px solid #bdc3c7; }
.top-menu { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; max-width: 100%; }
.main-nav { display: flex; flex: 1; justify-content: flex-start; gap: 20px; }
.main-nav li { position: relative; }
.main-nav a { padding: 10px; display: block; font-weight: bold; }
.dropdown { 
    display: none; position: absolute; top: 100%; left: 0; background: #bdc3c7; min-width: 200px; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); z-index: 1000; flex-direction: column;
}
.dropdown li { border-bottom: 1px solid #95a5a6; }
.dropdown a { padding: 10px; font-weight: normal; }
.main-nav li:hover .dropdown { display: flex; }
.site-title { font-size: 1.5em; font-weight: bold; text-align: center; flex: 1; color: #2c3e50; }

/* Photo and Reference Layout */
.photo-reference { display: flex; flex-direction: column; align-items: flex-start; margin: 20px 0 13px 0; gap: 15px; }
.photo-reference .photo { flex: 1; max-width: 100%; }
.photo-reference .reference-link { flex: 1; text-align: left; }
.photo-reference .reference-link a { 
    display: inline-block; padding: 10px 15px; background: #3498db; color: white; 
    text-decoration: none; border-radius: 5px; font-weight: bold; transition: background 0.3s;
}
.photo-reference .reference-link a:hover { background: #2980b9; }

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .top-menu { flex-direction: column; gap: 10px; }
    .main-nav { justify-content: center; flex-wrap: wrap; gap: 10px; }
    .dropdown { position: static; box-shadow: none; background: #ecf0f1; }
    .main-nav li:hover .dropdown { display: none; } /* Hide dropdown on hover for mobile; tap to expand if JS added */
    body { padding: 10px; }
    .photo-reference { flex-direction: column; } /* Already column, but ensures stacking */
}

@media (min-width: 769px) {
    .photo-reference { flex-direction: row; align-items: flex-start; justify-content: flex-start; gap: 20px; }
    .photo-reference .photo { max-width: 30%; flex: 0 0 30%; margin-right: 20px; }
    .photo-reference .reference-link { max-width: 70%; flex: 1; margin-right: 50%; } /* Shifts link toward center with left margin */
}

/* Bio Section */
.bio-section { margin: 10px 0; }
.bio-section h2 { margin-bottom: 0px; }
.education, .experience { margin: 13px 0; }
.item { margin: 8px 0; padding-left: 10px; position: relative; }
.item::before { content: '•'; color: #3498db; font-weight: bold; position: absolute; left: 0; }
/* Tighten space between h2 and first item */
.education .item:first-of-type,
.experience .item:first-of-type {
    margin-top: 0px;
}