/* styles.css */

/* --- Global Reset & Base Styles --- */
/* This section establishes a consistent base style across all browsers. */
body {
  /* This font stack prioritizes 'Inter', a clean sans-serif font, and provides excellent system-level fallbacks for wide compatibility. */
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #333; /* A dark gray for text is often easier on the eyes than pure black. */
  background-color: #fff;
  margin: 0; /* Removes default browser margin for consistent cross-browser spacing. */
  line-height: 1.6; /* A line height greater than 1 improves readability, especially for long paragraphs. */
  font-size: 16px; /* Sets a comfortable base font size for desktops. */
  padding-bottom: 50px;
}

/* --- Layout & Container --- */
/* The container class centers the content and prevents it from becoming too wide on large screens. */
.container {
  max-width: 900px; /* A max-width keeps content readable without excessive line length. */
  margin: 0 auto; /* The 'auto' value for left/right margins is a classic way to center a block element. */
  padding: 0 20px; /* Provides breathing room on the sides, especially on smaller screens. */
}

/* --- Link Styling --- */
a {
  color: #b03a70; /* A custom brand color for links makes them stand out. */
  text-decoration: none; /* Removing the underline for a cleaner, more modern look. */
}

a:hover {
  text-decoration: underline; /* The underline reappears on hover, providing clear visual feedback. */
}

/* --- Header & Navigation --- */
/* This wrapper makes the header "sticky" while giving it a background and border. */
.site-header-wrapper {
  background-color: rgba(255, 255, 255, 0.95); /* A semi-transparent background allows content to be faintly visible when scrolling under the header. */
  border-bottom: 1px solid #eee; /* A subtle separator between the header and main content. */
  position: sticky; /* The header will scroll with the page until it hits the top, then it will stick there. */
  top: 0; /* Tells the sticky element to stick to the very top of the viewport. */
  z-index: 100; /* A high z-index ensures the header stays on top of other content during scrolling. */
}

.site-header {
  display: flex; /* Flexbox is ideal for aligning a row of items. */
  justify-content: space-between; /* This pushes the social links and nav to opposite ends of the container. */
  align-items: center; /* This vertically centers all items in the header. */
  padding-top: 15px;
  padding-bottom: 15px;
}

.social-links {
  display: flex;
  align-items: center;
  gap: 20px; /* 'gap' is a modern way to add space between flex items, simpler than using margins. */
}

/* MODIFIED SECTION FOR NEW ICONS */
.social-links a {
  color: #000000;
  display: inline-block; /* Ensures proper spacing and hit area for the link. */
  font-size: 24px;      /* This sets the size for the new icon fonts */
}
/* END OF MODIFIED SECTION */

.social-links a:hover {
  color: #b03a70; /* Darkens the icon on hover for clear feedback. */
}

.social-links .cv-link {
  font-weight: 600;
  font-size: 1em; /* This is relative to the new 24px size, making it a bit large. Let's adjust it. */
  font-size: 18px; /* Set a fixed size for the CV link to keep it consistent. */
}

/* The .social-links svg rule is no longer needed and has been removed. */

.main-nav ul {
  margin: 0;
  padding: 0;
  list-style: none; /* Removes the default list bullets. */
  display: flex;
  gap: 24px;
}

.main-nav a {
  color: #000000;
  font-size: 1em; /* Slightly smaller font size for secondary navigation. */
}

.main-nav a.active {
  color: #b03a70; /* Uses the brand color to indicate the current page. */
  font-weight: 500; /* Medium weight to make it stand out. */
}

/* --- Hamburger Menu (Mobile) --- */
/* The hamburger button is hidden by default on larger screens. */
.hamburger-menu {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0; /* Remove default padding for a cleaner look. */
}

.hamburger-menu svg {
  width: 30px;
  height: 30px;
  color: #333;
}

/* --- Main Content & Sections --- */
main {
  padding: 0px 0 30px;
}

section {
  margin-bottom: 30px; /* Reduced space between sections for the research page */
}

/* --- About Section Specifics (Homepage) --- */
.about-section::after {
  content: "";
  display: table;
  clear: both;
}

.profile-image {
  float: right;
  width: 250px;
  height: 250px;
  border-radius: 8px;
  object-fit: cover;
  margin-left: 30px;
  margin-bottom: 15px;
}

.about-text p {
  margin-top: 0;
  margin-bottom: 1.2em;
  font-size: 0.95em;
}

/* --- Heading Styles --- */
h1 {
  font-size: 2.5rem;
  font-weight: 400;
  margin-bottom: 15px;
  color: #000;
}

h1 span {
  font-weight: 700;
}

h2 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 30px;
  color: #000;
}

/* Added h3 style for subheadings on pages like 'research' */
h3 {
  font-size: 1.75rem;
  font-weight: 700;
  margin-top: 40px;
  margin-bottom: 20px;
  color: #000;
}

/* --- News Section Styling (Homepage) --- */
.news-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.news-item {
  display: flex;
  align-items: center;
  gap: 15px;
}
.news-date {
  background-color: #f3f4f6;
  color: #4b5563;
  font-family: "Roboto Mono", monospace;
  font-size: 0.85em;
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
}
.news-text {
  line-height: 1.5;
  font-size: 0.95em;
  margin: 0;
}

/* --- Page Content & Component Styles (NEW) --- */
/* Styles for subtitles and lists on content-heavy pages like 'research' */

.page-subtitle {
  color: #666;
  margin-top: -10px;
  margin-bottom: 25px;
  font-size: 0.90em;
}

.content-list {
  padding-left: 20px;
  line-height: 1.8;
}
.content-list ul {
  padding-left: 25px;
  margin-top: 8px;
}

/* For the boxed 'back to top' arrow link */
.back-to-top-link {
  display: inline-block;
  font-size: 1rem;
  font-weight: normal;
  color: #555;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 1px 8px;
  text-decoration: none;
  vertical-align: middle;
  margin-left: 10px;
  font-size: 0.6em;
}
.back-to-top-link:hover {
  background-color: #f5f5f5;
  border-color: #ccc;
  text-decoration: none;
}

main section p {
  margin-top: 0;
  margin-bottom: 1.2em;
  font-size: 0.95em;
}

/* --- Footer --- */
footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #111; /* A very dark grey, almost black */
  color: white;
  text-align: center;
  padding: 0;
  z-index: 100;
  font-size: 12px;
  line-height: 1;
}

/* --- Responsive Design --- */
@media (max-width: 768px) {
  body {
    font-size: 15px;
  }
  .site-header {
    flex-wrap: wrap;
  }
  .main-nav {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    width: 100%;
    order: 3;
  }
  .main-nav.is-open {
    max-height: 300px;
    margin-top: 15px;
  }
  .main-nav ul {
    flex-direction: column;
    align-items: flex-end;
    gap: 15px;
    padding: 15px;
    background-color: white;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  }
  .hamburger-menu {
    display: block;
  }
  .profile-image {
    float: none;
    display: block;
    width: 80%;
    max-width: 250px;
    height: auto;
    margin: 0 auto 25px auto;
  }
  h1 {
    font-size: 2.25rem;
  }
  h2 {
    font-size: 2rem;
  }
  h3 {
    font-size: 1.5rem;
  }
}