/*
 * Styling for the multi‑page CallGenix‑inspired demo.
 * The layout mirrors the single‑page version but uses anchor links
 * instead of JavaScript to navigate between pages.  The current page
 * is highlighted by adding the `active` class to the corresponding
 * menu item.
 */

.avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin-right: 0.5rem;
    vertical-align: middle;
}


* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Roboto', sans-serif;
  line-height: 1.6;
  color: #333;
}

/* Header styles */
.site-header {
  background-color: #CE5DB3;
  color: #fff;
  padding: 0.25rem 1.5rem;
  border-bottom: 4px solid #CE5DB3;
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-left: auto; /* push title to the right */
}

.site-logo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.site-title {
    font-family: 'Monda', sans-serif;
    font-size: 28px;
    font-weight: 500;
    color: #FFFFFF;
    white-space: nowrap;
    margin-left: auto;
}

/* Layout wrapper */
.wrapper {
  display: flex;
  min-height: calc(100vh - 96px);
}

/* Sidebar */
.sidebar {
  width: 100px;
  background-color: #f5f5f5;
  border-right: 1px solid #ddd;
  padding-top: 1rem;
}

.menu {
  list-style: none;
}

.menu-item {
  border-bottom: 1px solid #e0e0e0;
}

.menu-item a {
  display: block;
  padding: 0.75rem 1rem;
  color: #444;
  font-weight: 400;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.menu-item a:hover {
  background-color: #eaeaea;
}

.menu-item.active a {
  background-color: #42a5f5;
  color: #fff;
  text-decoration: none;
}

/* Content */
.content {
  flex: 1;
  padding: 2rem;
  overflow-y: auto;
}

.content h2 {
  margin-bottom: 1rem;
  color: #2e2e2e;
  border-bottom: 2px solid #f06292;
  padding-bottom: 0.5rem;
}

.content p {
  margin-bottom: 1rem;
  text-align: justify;
}

/* Profile photo in the About Me section: float the image to the left on larger
   screens so that text wraps around it. On small screens, stack it above the
   text for better readability. */
.profile-photo {
  float: left;
  max-width: 200px;
  height: auto;
  margin: 0 1rem 1rem 0;
  border-radius: 8px;
}


/* Responsive adjustments */
@media (max-width: 768px) {
  /* Keep the layout in a row but shrink the sidebar */
  .wrapper {
    flex-direction: row;
  }
  
  /* Adjust the size and weight of the site title on smaller screens */
@media (max-width: 768px) {
    .site-title {
        font-size: 15px;
        font-weight: 300;
    }
}

/* before change, it was max-width: 160px  */
@media (max-width: 768px) {
    .profile-photo {
        float: none;
        width: 50%;       /* or set a fixed width, e.g. 120px */
        max-width: 100%; /* cap the size so it doesn’t dominate */
        display: block;
        border-radius: 50%; /* optional: makes it circular */
        margin: 0 auto 1rem auto;
    }
}

  
  /* Sidebar occupies a smaller fraction of the screen */
  .sidebar {
    /* Make the sidebar narrower on small screens */
    width: 30%;
    min-width: 110px;
    border-bottom: none;
    border-right: 1px solid #ddd;
  }
  .content {
    flex: 1;
    padding: 1.5rem;
  }
  /* Compact navigation items */
  .menu-item a {
    padding: 0.5rem;
    font-size: 0.85rem;
    white-space: normal;
  }
}