/* === Root Variables for Theming === */ 
:root { 
 --bg: #ffffff; 
 --fg: #333333; 
 --accent: #005a9c; /* A classic academic blue */ 
 --accent2: #4a4a4a; /* A darker grey for secondary elements */ 
 --card: #f9f9f9; 
 --border: #dddddd; 
 --link: #005a9c; 
 --header: #f0f0f0; 
 --shadow: 0 2px 4px rgba(0,0,0,0.1); 
 --radius: 4px; 
 --font-main: 'Arial', 'Helvetica', sans-serif; 
 --font-headings: 'Georgia', 'Times New Roman', serif; 
 --font-mono: 'Courier New', 'monospace'; 
} 

body { 
 background: var(--bg); 
 color: var(--fg); 
 font-family: var(--font-main); 
 margin: 0; 
 padding: 0; 
 min-height: 100vh; 
 line-height: 1.7; 
 scroll-behavior: smooth; 
} 

/* Header Styling */ 
header { 
 background: var(--header); 
 color: var(--accent); 
 padding: 20px; 
 text-align: center; 
 border-bottom: 2px solid var(--border); 
 box-shadow: none; 
} 

#main-title, h1 { 
 color: var(--accent); 
 margin: 0; 
 font-family: var(--font-headings); 
 font-size: 2.2em; 
 font-weight: 700; 
 letter-spacing: normal; 
 text-shadow: none; 
} 

.subtitle { 
 margin-top: 5px; 
 font-size: 1.1em; 
 font-weight: 300; 
 opacity: 0.9; 
 color: var(--fg); 
} 

/* Navigation Styling */ 
nav { 
 background: var(--card); 
 padding: 10px 0; 
 box-shadow: 0 1px 2px rgba(0,0,0,0.1); 
 position: sticky; 
 top: 0; 
 z-index: 1000; 
 border-bottom: 1px solid var(--border); 
} 

nav ul { 
 list-style: none; 
 padding: 0; 
 margin: 0; 
 display: flex; 
 justify-content: center; 
 flex-wrap: wrap; 
} 

nav ul li { 
 margin: 0 15px; 
} 

nav ul li a { 
 text-decoration: none; 
 color: var(--link); 
 font-weight: 500; 
 font-size: 1em; 
 transition: color 0.2s, text-decoration 0.2s; 
 padding: 5px 8px; 
 border-radius: 4px; 
 display: inline-block; 
} 

nav ul li a:hover { 
 color: #003366; 
 text-decoration: underline; 
} 

/* Main Content Styling */ 
main { 
 width: 90%; 
 max-width: 960px; 
 margin: 30px auto; 
 padding: 20px; 
 background: var(--bg); 
 box-shadow: none; 
 border-radius: 0; 
} 

section { 
 background: var(--card); 
 border-radius: var(--radius); 
 margin-bottom: 30px; 
 padding: 20px; 
 border: 1px solid var(--border); 
 box-shadow: none; 
 transition: none; 
} 

section:hover { 
 box-shadow: none; 
} 

section:last-child { 
 margin-bottom: 0; 
} 

/* Headings */ 
h1, h2, h3 { 
 font-family: var(--font-headings); 
 color: var(--accent); 
} 

h1 { 
 color: var(--accent); 
 font-size: 2em; 
 margin-top: 0; 
 margin-bottom: 20px; 
 text-align: left; 
} 

h2 { 
 color: var(--accent2); 
 font-size: 1.5em; 
 margin-top: 0; 
 margin-bottom: 15px; 
 border-bottom: 1px solid var(--border); 
 padding-bottom: 5px; 
 display: block; 
 background: none; 
 -webkit-background-clip: unset; 
 -webkit-text-fill-color: unset; 
 background-clip: unset; 
} 

h3 { 
 color: var(--accent); 
 font-size: 1.2em; 
 margin-top: 15px; 
 margin-bottom: 8px; 
} 

/* Paragraphs */ 
p { 
 color: var(--fg); 
 margin-bottom: 15px; 
 font-size: 1em; 
} 

/* Specific Content Blocks */ 
.career-spotlight, .innovation-insights { 
 margin-top: 20px; 
 padding: 15px; 
 border-left: 4px solid var(--accent); 
 background: #f0f8ff; /* A light blue background */ 
 border-radius: var(--radius); 
 margin-bottom: 20px; 
 box-shadow: none; 
} 

.innovation-insights { 
 border-left-color: var(--accent2); 
 background: #f5f5f5; 
} 

/* Lists within spotlights */ 
.career-spotlight ul, .innovation-insights ul { 
 list-style: disc inside; 
 margin: 10px 0 0 0; 
 padding-left: 15px; 
} 

.career-spotlight ul li, .innovation-insights ul li { 
 margin-bottom: 6px; 
 color: #555555; 
} 

/* Links within spotlight sections */ 
.career-spotlight a, .innovation-insights a { 
 color: var(--link); 
 text-decoration: underline; 
 font-weight: 500; 
} 

.career-spotlight a:hover, .innovation-insights a:hover { 
 color: #003366; 
 text-decoration: none; 
} 

/* Footer */ 
footer { 
 background: var(--header); 
 color: var(--fg); 
 text-align: center; 
 padding: 15px 0; 
 border-top: 1px solid var(--border); 
 font-size: 0.9em; 
 margin-top: 30px; 
 box-shadow: none; 
 border-radius: 0; 
} 

/* Settings page */ 
.setting-row { 
 margin-bottom: 15px; 
} 
.setting-row label { 
 font-weight: 700; 
} 
.setting-row .desc { 
 font-size: 0.9em; 
 color: #666666; 
 margin-bottom: 6px; 
} 

/* Responsive Adjustments */ 
@media (max-width: 900px) { 
 main { width: 95%; padding: 15px; } 
 h1, #main-title { font-size: 1.8em; } 
 h2 { font-size: 1.3em; } 
 section { padding: 15px; } 
} 

@media (max-width: 600px) { 
 header { padding: 15px; } 
 nav ul { flex-direction: column; align-items: center; } 
 nav ul li { margin: 5px 0; } 
 main { margin: 15px auto; } 
 section { margin-bottom: 15px; } 
}