/* Custom styling for social icons */
ul.social {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 15px;
}

ul.social li {
  list-style-type: none;
}

ul.social li a {
  display: inline-block;
  font-size: 1.5em;
  color: #555;
  transition: color 0.3s ease;
}

ul.social li a:hover {
  color: #000;
  text-decoration: none;
}

/* Custom SVG icon styling */
ul.social li a img.custom-icon {
  width: 24px;
  height: 24px;
  filter: brightness(0) saturate(100%) invert(18%) sepia(19%) saturate(2047%) hue-rotate(165deg) brightness(97%) contrast(101%);
  transition: all 0.3s ease;
}

ul.social li a:hover img.custom-icon {
  /* Same filter as normal state to maintain color */
  filter: brightness(0) saturate(100%) invert(18%) sepia(19%) saturate(2047%) hue-rotate(165deg) brightness(97%) contrast(101%);
  transform: scale(1.2);
}

/* Subtitle styling */
aside p {
  text-align: center;
  line-height: 1.6;
  margin: 0.7em 0;
  font-size: 0.95em;
}

/* Container for centered layout */
.page-container {
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
  position: relative;
}

/* Basic page layout settings */
html, body {
  overflow-x: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: #e1d9cf; /* Light gray background */
}

body {
  min-height: 100vh !important;
  position: relative !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Raleway', sans-serif; /* Add Raleway as default font */
  font-weight: 300; /* Make the font thinner (values range from 100-900, with 400 being normal) */
  color: #104862; /* Text color for better contrast */
}

/* Sidebar styling with orange/coral color - mobile first approach */
aside {
  background-color: #985D4C; /* Orange/coral color */
  border: 3px solid #985D4C; /* Thicker border */
  border-bottom: 3px solid #985D4C !important; /* Explicitly set bottom border */
  border-radius: 10px !important; /* Enforce rounded corners on all sides */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Shadow for elevation effect */
  padding: 20px;
  margin: 20px 0; /* Centered margin */
  color: #E1d9cf; /* Text color for better contrast */
  font-family: 'Raleway', sans-serif;
  letter-spacing: -0.03em; /* Reduced spacing between letters */
  width: 100%; /* Full width on mobile */
  max-width: 100%; /* Full width on mobile */
  position: static; /* Default positioning for mobile */
  box-sizing: border-box;
}

/* Main content area - mobile first approach */
main {
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
  max-width: 100%;
}

main article {
  max-width: 100%;
}

/* Medium screen layout (tablet/small desktop) */
@media screen and (min-width: 768px) and (max-width: 1199px) {
  /* Page container to center everything */
  body > * {
    max-width: 1200px;
    width: 100%;
  }
  
  /* Sidebar with fixed position */
  aside {
    height: auto !important; /* Override 100vh height */
    min-height: 0 !important; /* Remove any min-height */
    max-height: 90vh !important; /* Limit height to 90% of viewport */
    position: fixed !important; /* Keep fixed position but contained */
    padding-bottom: 30px !important; /* Ensure space at bottom */
    overflow-y: auto !important; /* Enable scrolling if content is too long */
    width: 220px !important; /* Fixed width */
    max-width: 220px !important; /* Fixed max width */
    top: 20px !important; /* Position with margin from top */
    border-top-width: 3px !important; /* Keep the top border */
    margin-top: 0 !important; /* Reset margin */
    left: 10px !important; /* Fixed position from left edge */
  }
  
  /* Main content with fixed left margin to prevent overlap */
  main {
    width: calc(100% - 250px) !important; /* Width based on available space */
    max-width: 900px !important; /* Max width */
    min-height: 100vh !important; /* Ensure main content fills the height */
    padding: 20px 0 !important; /* 20px padding on top/bottom, 0 on left/right */
    margin: 0 !important; /* Reset margin */
    margin-left: 250px !important; /* Fixed margin to avoid sidebar */
    box-sizing: border-box;
  }
}

/* Large screen layout (desktop/wide screens) */
@media screen and (min-width: 1200px) {
  /* Page container to center everything */
  body > * {
    max-width: 1200px;
    width: 100%;
  }
  
  /* Sidebar with proper margin/spacing */
  aside {
    height: auto !important; /* Override 100vh height */
    min-height: 0 !important; /* Remove any min-height */
    max-height: 90vh !important; /* Limit height to 90% of viewport */
    position: fixed !important; /* Keep fixed position but contained */
    padding-bottom: 30px !important; /* Ensure space at bottom */
    overflow-y: auto !important; /* Enable scrolling if content is too long */
    width: 220px !important; /* Fixed width */
    max-width: 220px !important; /* Fixed max width */
    top: 20px !important; /* Position with margin from top */
    border-top-width: 3px !important; /* Keep the top border */
    margin-top: 0 !important; /* Reset margin */
    margin-left: calc(50% - 600px + 10px) !important; /* Position relative to center */
    left: 0;
  }
  
  /* Main content aligned with sidebar and centered */
  main {
    width: 900px !important; /* Fixed width for main content */
    max-width: 900px !important; /* Max width */
    min-height: 100vh !important; /* Ensure main content fills the height */
    padding: 20px 0 !important; /* 20px padding on top/bottom, 0 on left/right */
    margin: 0 !important; /* Reset margin */
    margin-left: calc(50% - 600px + 180px) !important; /* Position right next to sidebar */
    box-sizing: border-box;
  }
}

/* Common styles for tablet and desktop layouts */
@media screen and (min-width: 768px) {
  /* Remove empty navigation space when main menu is disabled */
  main nav {
    display: none !important; /* Hide empty nav completely */
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
  }
  
  /* Adjust article content to start at the top and remove all margins */
  main article {
    margin: 0 !important; /* Remove all margins */
    padding: 0 !important; /* Remove all padding */
  }
  
  /* Style for footer to ensure it's at the bottom */
  footer {
    margin-top: auto !important;
    width: 100%;
    max-width: 1200px;
  }
}

/* First element spacing reset */
.page-header:first-child,
main article h1:first-child,
main article h2:first-child,
main article p:first-child,
main article > *:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* More specific selector for profile image only */
aside > div > a:first-child > img {
  border: none; /* Thinner border */
  border-radius: 50%; /* Make it round/oval again */
}

/* Ensure icons don't have borders */
ul.social li a img.custom-icon {
  border: none !important;
  border-radius: 0 !important;
}

/* Adjust links and text in sidebar for better contrast */
aside a, aside h1 a {
  color: #E1d9cf;
  font-family: 'Raleway', sans-serif;
  font-weight: bold;
}

aside a:hover, aside h1 a:hover {
  color: #104862;
  text-decoration: none;
}

/* Override social icon styling with faded brand colors and black border */
ul.social a {
  border: none; /* Add black border */
  transition: all 0.3s ease;
}

/* Brand-specific colors (faded versions) */
ul.social a.sc-github {
  background-color: #E1d9cf !important; /* Lighter gray instead of black */
}

ul.social a.sc-linkedin {
  background-color: #E1d9cf !important; /* Faded blue */
}

ul.social a.sc-google {
  background-color: #E1d9cf !important; /* Faded red */
}

/* Keep the hover animation */
ul.social a:hover {
  transform: translateY(-2px); /* Keep the lifting animation */
  opacity: 1 !important; /* Full opacity on hover */
}

/* Icon styling */
ul.social li a img.custom-icon {
  filter: brightness(0) saturate(100%) invert(18%) sepia(19%) saturate(2047%) hue-rotate(165deg) brightness(97%) contrast(101%); /* #104862 color */
  margin-top: 6px; /* Center vertically in the circle */
}

ul.social li a:hover img.custom-icon {
  filter: brightness(0) saturate(100%) invert(18%) sepia(19%) saturate(2047%) hue-rotate(165deg) brightness(97%) contrast(101%);
}

/* Capitalize first letter of sidebar navigation links */
aside nav ul.list li a {
  text-transform: capitalize;
}

/* Target all header elements to ensure no top space */
main h1, main h2, main h3, main .page-header {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Override theme's default article margins */
main article {
  margin: 0 !important;
  padding: 0 !important;
}

/* Adjust article content for proper spacing */
main article header,
main article header h1,
main article header h2,
main article section,
main article footer {
  margin: 0 !important;
  padding: 0 !important;
}

/* Add vertical spacing between article elements for readability */
main article p,
main article h1,
main article h2,
main article h3,
main article h4,
main article h5,
main article h6,
main article ul,
main article ol {
  margin-top: 1em !important;
  margin-bottom: 1em !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Fix list indentation */
main article ul,
main article ol {
  padding-left: 2em !important;
}

/* Reset any padding or margins on the body and html */
body, html {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Align page titles to the right */
.page-header h1, 
main article header h1 {
  text-align: right;
}

/* Ensure italic text is not bold in article content */
main article em,
main article p em,
main article li em,
main article div em,
main article * em {
  font-weight: normal !important;
  font-style: italic !important;
}

/* Specific rules for article titles, years, and journal names - these need higher specificity */
main article ul li p em,
main article ul li em,
main article ul li > em,
main article ul li p > em,
main article ul li *:first-child em {
  font-weight: normal !important; 
  font-style: italic !important;
}

/* Overrides with extremely high specificity as a last resort */
body main article div ul li em,
body main article div ul li p em {
  font-weight: normal !important;
  font-style: italic !important;
}