/* styles.css */
html,
body {
  margin: 0;
  padding: 0;
  /* height: 100%; */
  /* scroll-snap-type: y mandatory; */
  overflow-y: auto;
  scroll-behavior: smooth;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.section {
  /* scroll-snap-align: start; */
  min-height: 100vh;
  height: auto;
  padding: 0rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  transition: background 0.3s ease, color 0.3s ease;
  /* margin-bottom: 3rem; */
  box-sizing: border-box;
  width: 100%; /* Ensure section takes full width */
  /* padding-top: 3rem;
    padding-bottom: 3rem; */
}

.profile-img {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  margin-bottom: 1.5rem;
  object-fit: cover;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* .logo-img {
  width: 30px;
  height: 25px;
  border-radius: 20%;
  /* object-fit: cover; 
} */

.cta-buttons .btn {
  margin: 0.5rem;
}

/* Light Mode */
body.light-mode {
  background-color: #f9f9f9;
  color: #222;
}

body.light-mode .navbar {
  background-color: #343a40;
}

/* body.light-mode .section {
    background-color: #f9f9f9;
    color: #222;
} */

.blog-item {
  display: block;
  background-color: #ffffff;
  border: 1px solid #e1e4e8; /* A thin border on top, right, and bottom */
  border-left: 4px solid #ced4da; /* A thicker gray accent on the left */
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: all 0.2s ease-in-out;
}

/* Adds a nice color pop on hover */
.blog-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
  text-decoration: none;
  border-left-color: #0d6efd; /* Changes accent to primary blue on hover */
}

/* Dark Mode styles for the accent border */
body.dark-mode .blog-item {
  background-color: #161b22;
  border-color: #30363d; /* Sets top, right, bottom borders */
  border-left-color: #484f58; /* Sets left accent border */
}

body.dark-mode .blog-item:hover {
  border-left-color: #58a6ff; /* Lighter blue accent on hover */
}

/* Dark Mode */
body.dark-mode {
  background-color: #0a0e12;
  color: #f0f0f0;
}

body.dark-mode .bg-white {
  background-color: #0a0e12;
  color: #f0f0f0;
}

body.dark-mode .bg-white h3,
body.dark-mode .bg-white p,
body.dark-mode .bg-white ul li {
  color: #f0f0f0; /* Light text color */
}

/* Change the box background in dark mode */
body.dark-mode .bg-white {
  background-color: #161b22 !important; /* A dark color, slightly lighter than the page background */
  border: 1px solid #30363d; /* Optional: Adds a subtle border to define the boxes */
}

/* Make sure all text inside the dark-mode boxes is light */
body.dark-mode .bg-white p {
  color: #c9d1d9 !important; /* A softer white for paragraph text */
}

/*---- Adjust Bootstrap's colored text for dark mode for better readability */
body.dark-mode .bg-white .text-primary {
  color: #58a6ff !important;
}

body.dark-mode .bg-white .text-success {
  color: #56d364 !important;
}

body.dark-mode .bg-white .text-warning {
  color: #e3b341 !important;
}

body.dark-mode .bg-white .text-info {
    color: #79c0ff !important;
}


/* Makes the Blog Cards titles visible in dark mode */
body.dark-mode .card .card-title {
  color: #c9d1d9 !important; /* A light grayish-white color */
}

/* Makes the muted text (like the date) visible in dark mode */
body.dark-mode .card .text-muted {
  color: #8b949e !important; /* A slightly dimmer gray for muted text */
}

/* Contact buttons text color in dark mode */
body.dark-mode .social-links a {
  color: #f0f0f0;
}
body.dark-mode .coding-profiles a {
  color: #f0f0f0;
}


/* Change the card background and border in dark mode */
body.dark-mode .card {
  background-color: #161b22 !important; 
  border: 1px solid #30363d;
}

/* Change the card's main paragraph text color */
body.dark-mode .card .card-text {
  color: #c9d1d9;
}

/* Adjust the colored titles inside the cards for dark mode */
body.dark-mode .card .text-primary {
  color: #58a6ff !important;
}

body.dark-mode .card .text-success {
  color: #56d364 !important;
}

body.dark-mode .card .text-warning {
  color: #e3b341 !important;
}


body.dark-mode .navbar {
  background-color: #222;
}

body.dark-mode .section {
  background-color: #0a0e12;
  color: #f0f0f0;
}

/* Project list styling */
.project-item {
  margin: 1.5rem 0;
}

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

a:hover {
  text-decoration: underline;
}

.col-md-4 {
  padding-bottom: 20px;
}

.card,
.bg-white {
  margin-bottom: 1rem;
}

/* --- Mobile Adjustments --- */
@media (max-width: 576px) {
  html,
  body {
    /* *** Explicitly disable scroll snapping on mobile *** */
    scroll-snap-type: none;
  }

  .section {
    height: auto; /* Override: Let content define height */
    min-height: 0; /* Override: Remove min-height constraint */
    /* padding-top: 6rem; Keep space for fixed navbar */
    /* padding-bottom: 3rem; Space below content within the section */
    padding-left: 1rem;
    padding-right: 1rem;
    /* *** Significantly Increase margin between sections *** */
    margin-bottom: 4rem; /* <--- Increased from 2rem */
    /* *** Align content block to the top, not center *** */
    justify-content: flex-start; /* <--- Changed from center */
    /* Keep horizontal centering and text alignment */
    align-items: center;
    text-align: center;
    /* scroll-snap-align: none; /* Ensure snapping is off for the section */
  }

  /* Ensure content blocks within the section (like containers/rows) don't have conflicting margins */
  .section .container {
    padding-top: 0; /* Remove extra padding if any */
    padding-bottom: 0;
  }

  h1 {
    font-size: 1.8rem;
  }
  h2 {
    font-size: 1.5rem;
    margin-bottom: 2rem; /* Keep space below section titles */
  }

  /* Space between stacked columns */
  .row > * {
    margin-bottom: 1.5rem;
  }
  .row > *:last-child {
    margin-bottom: 0;
  }

  /* Ensure cards/boxes fill width and rely on column margin */
  .card,
  .bg-white {
    margin-bottom: 0; /* Rely on .row > * for spacing */
    width: 100%; /* Ensure cards/boxes take available width */
  }

  /* .card .btn {
    width: auto; 
  } */

  /* Keep other mobile styles: .profile-img, .cta-buttons, .navbar-toggler etc. */
  .profile-img {
    width: 120px;
    height: 120px;
    margin-top: 8rem; /* Add some margin above image if needed */
  }

  .cta-buttons .btn {
    margin: 0.3rem;
    padding: 0.5rem 0.8rem;
    font-size: 0.9rem;
  }

  .navbar-toggler {
    padding: 0.25rem 0.5rem;
    font-size: 1rem;
  }
}

/* #experience {
  margin-bottom: 5rem;
} */

/* #projects {
  margin-top: 5rem;
} */

footer {
  background-color: #0a0e12; /* Dark background */
  color: #f0f0f0; /* Light text color */
  padding: 1.5rem 0; /* Add padding for better spacing */
  text-align: center; /* Center-align text */
  position: relative; /* Ensure it stays at the bottom */
  z-index: 1; /* Ensure it is above other elements */
}