/* Global styles */
body {
  margin: 0;
  font-family: "Space Grotesk", "Noto Sans", sans-serif; /* From inline style */
  background-color: #101a23; /* Moved from page-wrapper for general page bg */
  color: white; /* Default text color */
}

.page-wrapper {
  position: relative;
  display: flex;
  width: 100%;
  /* height: 100%; Let content define height */
  min-height: 100vh;
  flex-direction: column;
  /* background-color: #101a23; Moved to body */
  overflow-x: hidden;
}

.content-area {
  display: flex;
  /* height: 100%; Removed to allow content to grow */
  flex-grow: 1;
  flex-direction: column;
  padding-top: 4rem; /* Added to offset for fixed header */
}

.main-header {
  position: fixed; /* Make header fixed */
  top: 0;
  left: 0;
  width: 100%;      /* Span full width */
  z-index: 1000;   /* Stay on top */
  background-color: #101a23; /* Add background to prevent content showing through */

  display: flex;
  align-items: center;
  justify-content: space-between;
  white-space: nowrap;
  border-bottom: 1px solid #223649;
  padding: 0.75rem 2.5rem; /* py-3 px-10 */
  box-sizing: border-box; /* Ensure padding doesn't add to width */
}

/* Header logo section */
.header-logo {
  display: flex;
  align-items: center;
  gap: 1rem; /* gap-4 */
  color: white;
}

.logo-icon svg { /* Assuming the div.size-4 is for the svg container */
  width: 1rem; /* size-4 */
  height: 1rem; /* size-4 */
  fill: currentColor; /* Added to ensure SVG takes color */
}

.header-title {
  color: white;
  font-size: 1.125rem; /* text-lg */
  font-weight: 700; /* font-bold */
  line-height: 1.25; /* leading-tight */
  letter-spacing: -0.015em; /* tracking-[-0.015em] */
}

/* Header navigation */
.header-nav {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  align-items: center; /* Added for vertical alignment with avatar */
  gap: 2rem; /* gap-8, applied to the parent of nav items and buttons */
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2.25rem; /* gap-9 */
}

.nav-link {
  color: white;
  font-size: 0.875rem; /* text-sm */
  font-weight: 500; /* font-medium */
  line-height: 1.25rem; /* leading-normal */
  text-decoration: none;
  position: relative; /* For pseudo-element positioning */
  white-space: nowrap; /* Prevent links from breaking mid-word */
}

.nav-link::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0); /* Initially hidden */
  height: 1px; /* Underline thickness */
  bottom: -4px; /* Position below the text, adjust as needed */
  left: 0;
  background-color: white; /* Color of the underline */
  transform-origin: bottom right; /* Animation origin */
  transition: transform 0.25s ease-out;
}

.nav-link:hover::after {
  transform: scaleX(1); /* Show on hover */
  transform-origin: bottom left; /* Animation origin for expansion */
}

/* Header action buttons (social icons) */
.header-actions {
  display: flex;
  gap: 0.5rem; /* gap-2 */
}

.social-icon-button {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 0.75rem; /* rounded-xl */
  width: 1.5rem; /* h-10, assuming square buttons by px-2.5 */
  height: 1.5rem; /* h-10 */
  background-color: #293542;
  color: white;
  text-decoration: none; /* Added to ensure no underline for a tags */
  border: 1px solid transparent; /* Initial transparent border */
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out; /* Smooth background and border transition */
  /* Removed gap, font-size, font-weight, etc. as icons are direct children now */
  padding: 0.625rem; /* px-2.5 was effectively this for square icon buttons */
  flex-shrink: 0; /* Prevent shrinking */
}

.social-icon-button:hover {
  background-color: #3c4d5e; /* Lighter shade for hover */
  border-color: white; /* Visible border on hover */
}

.social-icon-button svg { /* Styles for SVGs inside buttons */
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* Avatar */
.avatar-image { /* Generic avatar style */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 9999px; /* rounded-full */
  flex-shrink: 0; /* Prevent shrinking */
}

.avatar-image-header {
  width: 2.5rem; /* size-10 */
  height: 2.5rem; /* size-10 */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 9999px; /* rounded-full */
}

/* Main Content Wrapper */
.main-content-wrapper {
  display: flex;
  flex: 1;
  justify-content: center;
  padding: 1.25rem 10rem; /* py-5 px-40 */
  box-sizing: border-box;
  scroll-margin-top: 300px;
}

.content-limiter {
  display: flex;
  flex-direction: column;
  flex: 1;
  max-width: 960px;
  width: 100%; /* Ensure it takes up available space */
  box-sizing: border-box;
}

/* Profile Section */
.profile-section {
  display: flex;
  padding: 1rem; /* p-4 */
  width: 100%; 
  flex-direction: column; 
  gap: 1rem; 
  align-items: center; 
  box-sizing: border-box;
  scroll-margin-top: 5rem;
}

.profile-card { 
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem; 
}

.profile-avatar-large { /* Extends .avatar-image */
  min-height: 8rem; 
  width: 8rem; 
}

.profile-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.profile-name {
  color: white;
  font-size: 22px;
  font-weight: 700; 
  line-height: 0.5; 
  letter-spacing: -0.015em; 
  text-align: center;
}

.profile-title, .profile-bio {
  color: #90adcb;
  font-size: 1rem; 
  font-weight: 400; 
  line-height: 1; 
  text-align: center;
}

/* Section Title (reusable) */
.section-title {
  color: white;
  font-size: 22px;
  font-weight: 700; 
  line-height: 1.25; 
  letter-spacing: -0.015em; 
  padding: 1.25rem 1rem 0.75rem 1rem; 
  box-sizing: border-box;
  scroll-margin-top: 5rem;
}

.section-text {
  padding: 1.25rem 0.75rem 0.75rem 0.75rem; 
}

/* Featured Projects Section */
.projects-scroller-container {
  display: flex;
  overflow-y: auto;
  -ms-overflow-style: none;  
  scrollbar-width: none;  
}
.projects-scroller-container::-webkit-scrollbar {
  display: none; 
}

.projects-list {
  display: flex;
  align-items: stretch; 
  padding: 1rem; 
  gap: 0.75rem; 
}

.project-card {
  display: flex;
  height: 100%;
  flex: 1; 
  flex-direction: column;
  gap: 1rem; 
  border-radius: 0.5rem; 
  min-width: 15rem; 
  background-color: #1a202c; 
  box-sizing: border-box;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.project-card:hover {
  transform: translateY(-5px);
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
}

.project-image {
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  aspect-ratio: 16 / 9; 
  background-size: cover;
  border-radius: 0.5rem;
  position: relative; /* For pseudo-element positioning */
  overflow: hidden; /* To respect border-radius for pseudo-elements */
}

.image-tint-purple::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(128, 0, 128, 0.3); /* Purple with 30% opacity */
  z-index: 1; /* Ensure tint is on top of the background image */
  pointer-events: none; /* Allow clicks to pass through to the element below if needed */
}

.project-details { 
  padding: 0 0.5rem 0.5rem 0.5rem; 
}

.project-name {
  color: white;
  font-size: 1rem; 
  font-weight: 500; 
  line-height: 1.5; 
}

.project-name a {
  color: inherit;
  text-decoration: none;
}

.project-description {
  color: #90adcb;
  font-size: 0.875rem; 
  font-weight: 400; 
  line-height: 1.25rem; 
}

/* Skills Section */
.skills-list {
  display: flex;
  gap: 0.75rem; 
  padding: 0.75rem; 
  flex-wrap: wrap; 
  /* padding-right: 1rem; removed as overall padding handles it */
  box-sizing: border-box;
}

.skill-tag {
  display: flex;
  height: 2rem; 
  flex-shrink: 0; 
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem; 
  background-color: #223649;
  padding: 0 1rem; 
  transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.skill-tag:hover {
  transform: scale(1.05);
  background-color: #3c4d5e;
}

.skill-tag-text {
  color: white;
  font-size: 0.875rem; 
  font-weight: 500; 
  line-height: 1.25rem; 
  white-space: nowrap;
}

.skill-tag-text a {
  color: inherit;
  text-decoration: none;
}

/* Connect Section & Footer */
.connect-section {
  display: flex;
  justify-content: center;
  padding: 0.75rem 1rem 0.25rem 1rem; 
  box-sizing: border-box;
}

.connect-buttons-container {
  display: flex;
  flex: 1;
  gap: 0.75rem; 
  flex-wrap: wrap;
  max-width: 480px;
  justify-content: center;
}

.button { 
  display: flex;
  min-width: 84px;
  max-width: 480px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 0.5rem; 
  height: 2.5rem; 
  padding-left: 1rem; 
  padding-right: 1rem; 
  font-size: 0.875rem; 
  font-weight: 700; 
  line-height: 1.25rem; 
  letter-spacing: 0.015em; 
  flex-grow: 1; 
  border: none; /* Added to reset button default border */
  box-sizing: border-box;
}
.button-primary {
  background-color: #3d98f4;
  color: white;
}
.button-secondary {
  background-color: #223649;
  color: white;
}
.button-text { 
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.footer-text {
  color: #90adcb;
  font-size: 0.875rem; 
  font-weight: 400; 
  line-height: 1.25rem; 
  padding: 0.25rem 1rem 0.75rem 1rem; 
  text-align: center;
  box-sizing: border-box;
}

/* --- Responsive Design --- */

/* Tablet and larger phones */
@media (max-width: 768px) {
  .content-area {
    /* Adjust padding top if header height changes significantly. 
       Current header is ~4rem. If it wraps and becomes ~6-7rem: */
    padding-top: 8rem; 
  }

  .main-header {
    padding: 0.75rem 1rem; /* Reduced padding */
    flex-wrap: wrap; /* Allow items to wrap */
    justify-content: center; /* Center items when wrapped */
    white-space: normal; /* Allow text to wrap if needed */
  }

  .header-logo {
    flex-basis: 100%; /* Allow logo to take full width if nav wraps below */
    justify-content: center; /* Center logo */
    margin-bottom: 0.5rem; /* Space if nav wraps below */
  }
  
  .header-nav {
    flex-basis: 100%; /* Take full width to allow centering of its content */
    justify-content: center; /* Center nav links and actions container */
    gap: 1rem; /* Reduce gap between nav-links and header-actions */
    flex-wrap: wrap; /* Allow nav-links and header-actions to wrap */
  }

  .nav-links {
    gap: 1rem; /* Reduced gap between nav links */
    justify-content: center; /* Center nav links if they wrap */
    flex-wrap: wrap;
  }

  .header-actions {
    justify-content: center; /* Center social icons if they wrap */
    flex-wrap: wrap;
  }

  .main-content-wrapper {
    padding: 1.25rem 1.5rem; /* Reduced horizontal padding */
  }

  .profile-avatar-large {
    min-height: 6rem;
    width: 6rem;
  }

  .profile-name {
    font-size: 20px;
  }

  .profile-section {
    scroll-margin-top: 8rem;
  }

  .projects-list {
    /* Cards will still scroll horizontally by default in their container */
    /* If vertical stacking is preferred:
    flex-direction: column;
    align-items: center; */
  }

  .project-card {
     min-width: 12rem; /* Adjust for smaller screens if still horizontal */
     /* If stacked: 
     width: 90%; 
     min-width: 0; */
  }

  .skills-list {
    justify-content: center; /* Center skill tags */
  }

  .section-title {
    scroll-margin-top: 8rem;
  }
}

/* Smaller phones */
@media (max-width: 480px) {
  .content-area {
    /* Header might get even taller if every nav link stacks.
       Let's assume it could be up to 10-12rem in extreme stacking.
       This needs testing. For now, a slightly larger fixed padding. */
    padding-top: 8rem; /* More padding for potentially taller header */
  }

  .main-header {
    padding: 0.5rem 0.75rem; /* Further reduced padding */
    justify-content: space-between; /* Revert to space-between if logo and nav are on same line */
  }
  
  .header-logo {
    flex-basis: auto; /* Allow logo and nav to be side-by-side if possible */
    margin-bottom: 0; /* Reset margin */
    /* font-size of header-title could be reduced here if needed */
  }

  .header-nav {
    gap: 0.5rem; /* Further reduce gap */
    flex-direction: column; /* Stack nav-links and header-actions */
    align-items: flex-end; /* Align to the right */
    flex-basis: auto; /* Don't take full width from main-header */
  }

  .nav-links {
    flex-direction: column; /* Stack nav links */
    align-items: flex-end; /* Align links to the right */
    gap: 0.5rem; /* Gap between stacked links */
    width: 100%; /* Make nav links container take full width of its parent */
  }
  .nav-link {
    font-size: 0.8rem; /* Slightly smaller nav links */
    padding: 0.25rem 0; /* Add some padding for easier touch */
  }

  .header-actions {
    gap: 0.5rem; /* Keep some gap for social icons */
    /* align-self: flex-end; Already aligned by header-nav */
    width: 100%;
    justify-content: flex-end;
  }
  
  .social-icon-button {
    width: 2rem;
    height: 2rem;
    padding: 0.5rem;
  }
  .social-icon-button svg {
    width: 16px;
    height: 16px;
  }
  
  .avatar-image-header {
    width: 2rem;
    height: 2rem;
  }


  .main-content-wrapper {
    padding: 1.25rem 1rem; /* Further reduced padding */
  }

  .profile-avatar-large {
    min-height: 5rem;
    width: 5rem;
  }

  .profile-name {
    font-size: 18px;
  }
  .profile-title, .profile-bio {
    font-size: 0.9rem;
  }

  .section-title {
    font-size: 18px;
    padding: 1rem 0.5rem 0.5rem 0.5rem;
  }

  .projects-scroller-container {
    /* Optional: disable scroll and stack cards if preferred */
    /* overflow-x: hidden; */ 
  }
  .projects-list {
     /* If stacking:
     flex-direction: column;
     align-items: center;
     gap: 1rem; */
  }
  .project-card {
    min-width: 10rem; /* Adjust for very small screens if horizontal */
    /* If stacked:
    width: 95%;
    min-width: 0; */
  }
  .project-name {
    font-size: 0.9rem;
  }
  .project-description {
    font-size: 0.8rem;
  }


  .skill-tag {
    height: 1.75rem;
    padding: 0 0.75rem;
  }
  .skill-tag-text {
    font-size: 0.8rem;
  }

  .connect-buttons-container {
    flex-direction: column; /* Stack connect buttons */
    align-items: stretch; /* Make buttons full width of container */
  }
  .button {
    min-width: 0; /* Allow button to be smaller than 84px if needed */
    flex-grow: 0; /* Don't grow if stacked */
    width: 100%; /* Take full width when stacked */
  }

  .footer-text {
    font-size: 0.8rem;
  }
}