/* GOOGLE FONTS */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;1,400&display=swap");

/* VARIABLES CSS */
:root {
  --header-height: 3.5rem;

  /* Colors */
  /* Mode: "Modern Minimalist" - Slate, White, Black, Accent Blue */
  /* HSL(Hue, Saturation, Lightness) */
  /* HSL(Hue, Saturation, Lightness) */
  --first-color: hsl(210, 20%, 25%); /* Deep Slate */
  --first-color-alt: hsl(210, 20%, 20%); /* Darker Slate */
  --title-color: hsl(210, 20%, 15%);
  --text-color: hsl(210, 10%, 40%);
  --text-color-light: hsl(210, 8%, 65%);
  --body-color: hsl(210, 30%, 98%); /* Off-white */
  --container-color: #fff;
  --border-color: hsl(210, 10%, 90%);

  /* Fonts */
  --body-font: "Inter", sans-serif;
  --title-font: "Playfair Display", serif; /* Elegant for headers */
  --biggest-font-size: 2.25rem;
  --h1-font-size: 1.5rem;
  --h2-font-size: 1.25rem;
  --h3-font-size: 1rem;
  --normal-font-size: 0.938rem;
  --small-font-size: 0.813rem;
  --smaller-font-size: 0.75rem;

  /* Font weight */
  --font-medium: 500;
  --font-semibold: 600;

  /* z index */
  --z-tooltip: 10;
  --z-fixed: 100;
  --z-modal: 1000;
}

/* Responsive Typography */
@media screen and (min-width: 968px) {
  :root {
    --biggest-font-size: 3.5rem;
    --h1-font-size: 2.25rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: 1rem;
    --small-font-size: 0.875rem;
    --smaller-font-size: 0.813rem;
  }
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  background-color: var(--body-color);
  color: var(--text-color);
  transition: 0.3s; /* For Theme Change */
}

h1,
h2,
h3,
h4 {
  color: var(--title-color);
  font-weight: var(--font-semibold);
  font-family: var(--title-font);
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  max-width: 100%;
  height: auto;
}

/* REUSABLE CLASSES */
.container {
  max-width: 968px;
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

.grid {
  display: grid;
  gap: 1.5rem;
}

.section {
  padding: 4.5rem 0 2rem;
}

.section__title {
  font-size: var(--h2-font-size);
  color: var(--title-color);
  text-align: center;
  margin-bottom: 2rem;
}

.section__subtitle {
  display: block;
  font-size: var(--small-font-size);
  margin-bottom: 4rem;
  text-align: center;
  color: var(--text-color-light);
}

/* HEADER REMOVED - SIDEBAR NAVIGATION */
/* Floating Toggle Button */
.nav__toggle {
  position: fixed;
  top: 1.5rem;
  left: 1.5rem;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--title-color);
  z-index: var(--z-fixed);
  background-color: hsla(210, 30%, 98%, 0.8);
  backdrop-filter: blur(10px);
  padding: 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border-color);
  transition: 0.3s;
}

.nav__toggle:hover {
  color: var(--first-color);
}

/* Sidebar Menu */
.nav__menu {
  position: fixed;
  top: 0;
  left: -100%; /* Hidden by default */
  width: 280px; /* Sidebar width */
  height: 100vh;
  background-color: var(--body-color);
  padding: 2rem 1.5rem;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.1);
  transition: 0.4s;
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
}

/* Sidebar Content */
.nav__logo-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3rem;
}

.nav__logo {
  color: var(--title-color);
  font-weight: var(--font-semibold);
  font-family: var(--title-font);
  letter-spacing: 1px;
}

.nav__close {
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--title-color);
}

.nav__list {
  display: flex;
  flex-direction: column;
}

/* Navigation Items with Borders */
.nav__item {
  border-bottom: 1px solid var(--border-color);
}

.nav__item:first-child {
  border-top: 1px solid var(--border-color); /* Top border for first item */
}

.nav__link {
  display: block;
  padding: 1rem 0;
  color: var(--title-color);
  font-weight: var(--font-medium);
  transition: 0.3s;
  font-size: var(--small-font-size);
  text-transform: uppercase;
}

.nav__link:hover {
  color: var(--first-color);
  padding-left: 0.5rem; /* Slight shift on hover */
}

/* Show Menu */
.show-menu {
  left: 0;
}

/* HOME */
.home__container {
  row-gap: 4rem;
  padding-top: 2rem;
}

.home__data {
  text-align: center;
}

.home__greeting {
  display: block;
  font-size: var(--small-font-size);
  margin-bottom: 0.25rem;
  color: var(--text-color);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.home__name {
  font-size: var(--biggest-font-size);
  margin-bottom: 1rem;
}

.home__education {
  font-size: var(--h3-font-size);
  margin-bottom: 1.5rem;
  font-weight: var(--font-medium);
  color: var(--text-color);
}

.home__description {
  margin-bottom: 2.5rem;
  color: var(--text-color-light);
  line-height: mb-5;
}

.home__img {
  width: 250px;
  height: 300px;
  object-fit: cover;
  border-radius: 125px 125px 12px 12px; /* Arch shape */
  justify-self: center; /* Grid centering */
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.05);
}

.home__social {
  display: flex;
  justify-content: center;
  column-gap: 2rem;
}

.home__social-link {
  font-size: var(--small-font-size);
  color: var(--text-color);
  transition: 0.3s;
  font-weight: 500;
}

.home__social-link:hover {
  color: var(--first-color);
}

.home__buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

/* BUTTONS */
.button {
  display: inline-block;
  background-color: var(--first-color);
  color: #fff;
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: var(--font-medium);
  transition: 0.3s;
  border: 1px solid transparent;
}

.button:hover {
  background-color: var(--first-color-alt);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px hsla(210, 20%, 25%, 0.2);
}

.button--ghost {
  background-color: transparent;
  color: var(--first-color);
  border: 1px solid var(--first-color);
}

.button--ghost:hover {
  background-color: var(--first-color);
  color: #fff;
  transform: translateY(-3px);
}

/* ABOUT */
.about__container {
  row-gap: 2.5rem;
}

.about__data {
  text-align: center;
}

.about__description {
  margin-bottom: 2rem;
  line-height: 1.8;
}

.about__info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.about__box {
  background-color: var(--container-color);
  border: 1px solid var(--border-color);
  border-radius: 0.75rem;
  padding: 1.5rem 1rem;
  /* width: 110px; REMOVED FIXED WIDTH */
  text-align: center;
}

.about__icon {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.about__title {
  font-size: var(--small-font-size);
  font-weight: var(--font-semibold);
}

.about__subtitle {
  font-size: var(--smaller-font-size);
}

/* EXPERIENCE / STUDIES */
.experience__container {
  grid-template-columns: 1fr;
  row-gap: 2rem;
}

.experience__content {
  background-color: var(--container-color);
  padding: 1.5rem;
  border-radius: 1rem;
  border: 1px solid var(--border-color);
}

.experience__title {
  font-size: var(--h3-font-size);
  margin-bottom: 1.5rem;
  text-align: center;
}

.experience__group {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.5rem;
  border-bottom: 1px dashed var(--border-color);
  padding-bottom: 1rem;
}

.experience__group:last-child {
  margin-bottom: 0;
  border: none;
  padding-bottom: 0;
}

.experience__name {
  font-size: var(--normal-font-size);
  font-weight: var(--font-medium);
}

.experience__place {
  font-size: var(--small-font-size);
  color: var(--text-color-light);
  margin-top: 0.25rem;
}

.experience__year {
  font-size: var(--smaller-font-size);
  color: var(--text-color-light);
  margin-top: 0.5rem;
}

/* PUBLICATIONS */
.publications__container {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.publication__card {
  display: block;
  background-color: var(--container-color);
  padding: 1.5rem;
  border-radius: 1rem;
  border: 1px solid var(--border-color);
  transition: 0.3s;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.publication__card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
  transform: translateY(-5px);
  border-color: var(--first-color);
}

.publication__title {
  font-size: var(--normal-font-size);
  margin-bottom: 0.5rem;
  font-family: var(--body-font);
}

.publication__authors {
  font-size: var(--small-font-size);
  color: var(--text-color);
  margin-bottom: 0.5rem;
  font-style: italic;
}

.publication__journal {
  font-size: var(--smaller-font-size);
  color: var(--text-color-light);
  margin-bottom: 1rem;
}
/* Previous .publication__link removed as cards are now links */


/* CONTACT SOCIALS */
.contact__social-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 mini-boxes */
  gap: 0.75rem;
  margin-top: 1rem;
}

.contact__social-link {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--body-color);
  padding: 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border-color);
  font-size: var(--smaller-font-size);
  color: var(--title-color);
  transition: 0.3s;
}

.contact__social-link:hover {
  background-color: var(--first-color);
  color: #fff;
  transform: translateY(-3px);
  border-color: var(--first-color);
}

/* CONTACT */
.contact__container {
  row-gap: 3rem;
  padding-bottom: 3rem;
  justify-content: center;
}

.contact__info {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
}

.contact__card {
  background-color: var(--container-color);
  border: 1px solid var(--border-color);
  padding: 1rem;
  border-radius: 0.75rem;
  text-align: center;
}

.contact__card-icon {
  font-size: 2rem;
  color: var(--title-color);
  margin-bottom: 0.25rem;
  display: block;
}

.contact__card-title {
  font-size: var(--small-font-size);
  font-weight: var(--font-medium);
  margin-bottom: 0.25rem;
}

.contact__card--full {
  grid-column: 1 / -1;
}

.contact__card-data {
  font-size: var(--small-font-size);
  display: block;
  margin-bottom: 0.75rem;
  color: var(--text-color-light);
}

.contact__button {
  font-size: var(--small-font-size);
  color: var(--first-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  column-gap: 0.25rem;
}

/* FOOTER */
.footer {
  background-color: var(--first-color);
  padding: 2.5rem 0;
}

.footer__title {
  color: #fff;
  text-align: center;
  margin-bottom: 2rem;
}

.footer__link {
  color: hsl(210, 20%, 80%);
}

.footer__list {
  display: flex;
  justify-content: center;
  column-gap: 1.5rem;
  margin-bottom: 2rem;
}

.footer__copy {
  display: block;
  margin-top: 4.5rem;
  color: hsl(210, 20%, 65%);
  text-align: center;
  font-size: var(--smaller-font-size);
}

/* SCROLL BAR */
::-webkit-scrollbar {
  width: 0.6rem;
  background-color: hsl(210, 20%, 95%);
  border-radius: 0.5rem;
}
::-webkit-scrollbar-thumb {
  background-color: hsl(210, 10%, 75%);
  border-radius: 0.5rem;
}
::-webkit-scrollbar-thumb:hover {
  background-color: hsl(210, 10%, 65%);
}
/* About Section Base (Mobile) */
.about__container {
  grid-template-columns: 1fr !important; /* Force stack text and boxes vertically */
}

/* MEDIA QUERIES */
/* Tablet */
@media screen and (min-width: 576px) {
  .home__data {
    text-align: initial;
  }
  .home__container {
    grid-template-columns: 1fr 0.8fr;
    align-items: center;
  }
  .home__img {
    width: 300px;
    order: 1;
    justify-self: center;
  }
  .home__social {
    justify-content: flex-start;
  }
  .home__buttons {
    justify-content: flex-start;
  }

  /* About container removed from here to stack on tablet */
  
  .about__info {
    justify-content: flex-start;
  }

  .contact__info {
    min-width: 400px;
  }
}



/* Desktop Styles Adjustment for Sidebar logic */
@media screen and (min-width: 767px) {
  .container {
    margin-left: auto;
    margin-right: auto;
  }

  body {
    margin: 0;
  }
  
  /* About Section Grid for Desktop */
  .about__container {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    text-align: left;
  }
  
  .about__data {
    text-align: left;
  }
  
  .about__info {
    justify-content: initial;
  }
  
  .about__buttons {
    justify-content: initial;
  }

  /* Ensure toggle remains visible on desktop since we removed the header bar */
  .nav__toggle {
      display: block; /* Always visible floating button */
  }

  /* Keep sidebar checking standard behavior, or we can make it permanent on desktop if requested. 
     User said "menu deployed to the left", usually implies collapsible sidebar for clean look. 
     So we keep the toggle logic equal for all screens. */

  .section {
    padding: 7rem 0 2rem;
  }
  }

  .home__container {
    padding-top: 5rem;
    column-gap: 2rem;
  }
  .home__img {
    width: 350px;
    height: 450px;
  }

  .experience__container {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 3rem;
  }

  /* About Section Desktop Layout */
  .about__container {
    grid-template-columns: 1fr 0.8fr; /* Text wider than boxes */
    align-items: center;
    column-gap: 4rem;
  }

  /* Force 4 columns for Professional Experience on Desktop */
  /* Force 4 columns for Professional Experience on Desktop */
  .experience__data--4cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0; /* Remove gap to let borders sit evenly */
  }

  /* Reset default bottom border and add vertical divider */
  .experience__data--4cols .experience__group {
    border-bottom: 1px dashed var(--border-color); /* Add row divider */
    margin-bottom: 0;
    padding-bottom: 1rem;
    padding-top: 1rem; /* Add padding for row separation */
    
    border-right: 1px dashed var(--border-color);
    padding-right: 1.5rem; /* Spacing for the line */
    padding-left: 1.5rem;
    text-align: center; /* Center content in the column */
  }

  /* Remove vertical divider from the last item in EACH ROW (4th, 8th...) */
  .experience__data--4cols .experience__group:nth-child(4n) {
    border-right: none;
    padding-right: 0;
  }
  
  /* Remove left padding from the first item in EACH ROW (1st, 5th...) */
  .experience__data--4cols .experience__group:nth-child(4n+1) {
    padding-left: 0;
  }

  /* Remove top padding for the first row */
  .experience__data--4cols .experience__group:nth-child(-n+4) {
    padding-top: 0;
  }

  /* Remove bottom border and padding for the LAST ROW (items 5-8 for 8 total, or last 4 generically) */
  /* Using generic approach: if we know it's 2 rows max or variable, this might be tricky. */
  /* For now, assuming exact multiples of 4 or just targeting last 4 elements */
  .experience__data--4cols .experience__group:nth-last-child(-n+4) {
    border-bottom: none;
    padding-bottom: 0;
  }

  /* 2 Columns for Certificates/Projects */
  .experience__data--2cols {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
  }
  
  .experience__data--2cols .experience__group {
    border-bottom: 1px dashed var(--border-color);
    margin-bottom: 0;
    padding-bottom: 1rem;
    padding-top: 1rem;
    
    border-right: 1px dashed var(--border-color);
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    text-align: center;
  }

  /* Remove top padding for first row */
  .experience__data--2cols .experience__group:nth-child(-n+2) {
    padding-top: 0;
  }

  /* Remove right border for even items (2nd column) */
  .experience__data--2cols .experience__group:nth-child(2n) {
    border-right: none;
  }
  
  /* Remove left padding for odd items (1st column) to align content */
  .experience__data--2cols .experience__group:nth-child(2n+1) {
    padding-left: 0;
  }
  
  /* Remove right padding for even items (2nd column) */
  .experience__data--2cols .experience__group:nth-child(2n) {
    padding-right: 0;
  }

  /* Remove bottom border for the last row (last 2 items) */
  .experience__data--2cols .experience__group:nth-last-child(-n+2) {
    border-bottom: none;
    padding-bottom: 0;
  }

  /* Mobile adjustment: stack them if screen is small */
  @media screen and (max-width: 576px) {
    .experience__data--4cols, .experience__data--2cols {
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }
    .experience__data--4cols .experience__group, .experience__data--2cols .experience__group {
        border-right: none;
        border-bottom: 1px dashed var(--border-color);
        padding: 0 0 1rem 0;
    }
    .experience__data--4cols .experience__group:last-child, .experience__data--2cols .experience__group:last-child {
        border-bottom: none;
    }
  }

  .about__data {
    text-align: left;
  }

  .about__info {
    grid-template-columns: repeat(2, 1fr); /* 2 cols for boxes */
    justify-content: center;
  }

/* SCROLL REVEAL ANIMATION CLASSES */
.hidden-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: 1s;
}

.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Alternating Section Backgrounds */
.section--accent {
  background-color: var(--first-color);
  color: var(--body-color);
}

.section--accent .section__title,
.section--accent .section__subtitle {
  color: var(--body-color);
}

/* Reset text color inside cards (which have white background) */
.section--accent .experience__content,
.section--accent .publication__card,
.section--accent .about__box {
    color: var(--text-color);
}

.section--accent .experience__title,
.section--accent .experience__name,
.section--accent .publication__title,
.section--accent .about__title {
    color: var(--title-color);
}

.section--accent .experience__place,
.section--accent .experience__year,
.section--accent .publication__authors,
.section--accent .publication__journal,
.section--accent .about__subtitle {
    color: var(--text-color);
    opacity: 1;
}