html {
  /* Define a variable for the sticky header's height. Default to desktop height. */
  --header-height: 83px;
  /* This enables smooth scrolling natively in the browser. */
  scroll-behavior: smooth;
  /* This creates a top margin for scroll targets, so the sticky header
     doesn't overlap the section title. */
  scroll-padding-top: var(--header-height);
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.5;
}
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1em;
  border-bottom: 1px solid #eee;
  /* Make the header sticky so it's always visible */
  position: sticky;
  top: 0;
  background-color: #ffffff; /* Add a background to prevent content from showing through */
  z-index: 1000; /* Ensure it stays on top of other content */
}
.brand-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.logo {
  height: 50px; /* Adjust as needed */
  margin-right: 1em;
}
.brand-text {
  font-size: 2em;
  font-weight: bold;
  color: #222;
}
.header-right-group {
  display: flex;
  align-items: center;
  gap: 2em;
}
/* Main Navigation Styles */
.main-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 2em; /* Space between menu items */
}
.main-nav a {
  text-decoration: none;
  /* Use a blue color that matches the site's theme */
  color: #22509e;
  font-weight: bold;
  font-size: 1.1em;
}
.main-nav a:hover {
  /* A slightly darker blue for the hover state */
  color: #1b407e;
}
/* Language Switcher Styles */
.language-switcher select {
  padding: 5px;
  border-radius: 4px;
}
/* Page Content Styles */
.page-content {
  padding: 2em;
  max-width: 800px;
  margin: 0 auto;
}
.page-content h1 {
  color: #222;
  /* Make section titles more prominent */
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2.5rem;
}
.page-content p {
  color: #555;
}

/* === Section Styling for Single-Page Layout === */

/* Add a top border to create a hard separation line between sections. */
/* We exclude the #home banner section. */
section:not(#home) {
  border-top: 1px solid #e0e0e0;
}

/* Add generous vertical padding inside each section's content area. */
section:not(#home) .page-content {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* Add a subtle background color to alternate sections for better visual separation.
   The #home section is the 1st, #about is 2nd (even), #portfolio is 3rd (odd), etc. */
section:nth-of-type(even) {
  /* Use a subtle vertical gradient to create a "fade" effect.
     It starts with the light gray color and fades to white at the bottom,
     creating a smooth transition to the next section. */
  background: linear-gradient(to bottom, #7faedd, #ffffff);
}

/* === Portfolio Section Background === */
#portfolio {
  position: relative;
  /* Use the same image as the first banner slide */
  background-image: url('../images/banner/image1.png');
  background-size: cover;
  background-position: center;
  /* The 'fixed' attachment creates a parallax-like effect when scrolling */
  background-attachment: fixed;
}

/* Add a semi-transparent overlay to ensure text is readable */
#portfolio::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2); /* Further lighten the overlay for a much brighter image */
  z-index: 0; /* Place overlay behind the content */
}

/* Ensure the content sits above the overlay */
#portfolio .page-content {
  position: relative;
  z-index: 1;
  /* Override the default max-width to allow for a wider grid */
  max-width: 1300px;
}
/* Portfolio Styles */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 2em;
  margin-top: 2em;
}
.portfolio-item {
  border: 1px solid #eee;
  padding: 1.5em;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Override default dark text colors for elements inside #portfolio */
#portfolio h1, #portfolio h3, #portfolio p, #portfolio li {
  color: #fff;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
}

/* Adjust portfolio items for the new background */
#portfolio .portfolio-item {
  background-color: rgba(34, 80, 158, 0.6); /* Increased opacity for better readability */
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.portfolio-item h3 {
  margin-top: 0;
}

/* Style for images placed at the top of a portfolio card */
.portfolio-image {
  /* Use negative margins to break out of the parent's padding */
  margin: -1.5em -1.5em 1.5em -1.5em;
  /* Make the image span the full width of the card */
  width: calc(100% + 3em);
  height: 250px; /* Set a fixed height for uniform card images */
  /* Round the top corners to match the parent card's border-radius */
  border-radius: 8px 8px 0 0;
  /* Ensure the image covers the area without being stretched or squashed */
  object-fit: cover;
}

/* === Contact Section Styling === */
#contact {
  /* Set a minimum height to ensure this last section can be scrolled to correctly,
     even on large screens where it might not fill the viewport otherwise.
     100vh is the full viewport height; we subtract the header's height. */
  min-height: calc(100vh - var(--header-height));
  /* Use flexbox to vertically and horizontally center the content. */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Since the parent #contact is now a flex container handling alignment,
   we can remove the large vertical padding from its content block
   to prevent excessive empty space. */
#contact .page-content {
  padding-top: 0;
  padding-bottom: 0;
}

/* Style the contact info as a card, similar to portfolio items */
.contact-card {
  background-color: rgba(34, 80, 158, 0.6); /* Match portfolio item background */
  border: 1px solid rgba(255, 255, 255, 0.2); /* Match portfolio item border */
  padding: 2.5em;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  text-align: center;
  max-width: 550px; /* Constrain the card's width for better aesthetics */
}

/* Adjust text inside the card for the new dark background */
.contact-card h1, .contact-card p {
  color: #fff;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
}
.contact-card h1 {
  margin-bottom: 1rem; /* Reduce space below the heading */
}

.contact-card a {
  color: #a9d1ff; /* A lighter blue that works on the dark background */
  text-decoration: none;
  font-weight: 600;
}

/* Hamburger Menu Styles (for mobile) */
.hamburger-menu {
  display: none; /* Hidden by default, shown on mobile */
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1010; /* Ensure it's above the nav menu content */
}

.hamburger-bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  background-color: #222; /* Color of the bars */
  transition: all 0.3s ease-in-out;
}

/* Animate hamburger to an 'X' when the menu is open */
.hamburger-menu.is-open .hamburger-bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.hamburger-menu.is-open .hamburger-bar:nth-child(2) {
  opacity: 0;
}

.hamburger-menu.is-open .hamburger-bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Image Banner Styles */
   .image-banner {
    position: relative;
    width: 100%;
    /* Use viewport height (vh) to make the banner's height responsive.
       60vh means it will take up 60% of the browser window's height.
       Adjust this value to your liking. */
    height: 60vh;
    max-height: 650px; /* Optional: Prevents the banner from being excessively tall on large monitors. */
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: var(--bg-image-main);
    /* These properties are crucial for how the background image behaves. */
    background-size: cover;
    background-position: center 30%; /* A value between 0% (top) and 50% (center). Adjust as needed. */
    background-repeat: no-repeat;
    overflow: hidden; /* This is crucial to hide the image before it slides in. */
  }
  
  /* This pseudo-element is used for the cross-fade effect. */
  .image-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--bg-image-pseudo);
    /* Ensure the pseudo-element also has the same background properties. */
    background-size: cover; 
    background-position: center 30%; /* Keep this consistent with the main banner. */
    background-repeat: no-repeat;
    /* Start with the pseudo-element being transparent. */
    opacity: 0;
    /* This transition creates the smooth fade. */
    transition: opacity 1s ease-in-out;
    /* Place it behind the banner text but above the main background */
    z-index: 0;
  }
  
  /* When the .fade-in class is added by JavaScript, this fades the pseudo-element into view. */
  .image-banner.fade-in::before {
    opacity: 1;
  }
  
  .banner-text {
    position: relative; /* Ensures the text appears above the pseudo-element */
    z-index: 1;
    font-size: 3rem;
    font-weight: bold;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
    text-align: center;
    padding: 0 20px;
  }
  
  /* Media query for smaller screens to adjust font size */
  @media (max-width: 768px) {
    .banner-text {
      font-size: 2rem;
    }
  }
  

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  html {
    /* The header is now a fixed height on mobile. */
    --header-height: 70px;
  }

  .site-header {
    /* Revert to row layout to place logo and hamburger side-by-side */
    flex-direction: row;
    height: var(--header-height);
    padding: 0 1em; /* Adjust padding for the new layout */
  }

  .hamburger-menu {
    display: flex; /* Show the hamburger button */
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .header-right-group {
    /* Hide the nav group by default */
    display: none;
    /* Position it as an overlay below the header */
    position: absolute;
    top: var(--header-height); /* Start right below the header */
    left: 0;
    right: 0;
    /* Style the dropdown container */
    background-color: #fff;
    border-top: 1px solid #eee;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Override desktop styles */
    flex-direction: column;
    gap: 1.5em;
    padding: 2em;
    width: auto; /* Let it span the full width via left/right: 0 */
  }

  /* When the menu is open, display it */
  .header-right-group.is-open {
    display: flex;
  }

  .main-nav ul {
    flex-direction: column; /* Stack nav items vertically */
    align-items: center; /* Center the nav items */
    gap: 1.5em;
  }
  .brand-text {
    font-size: 1.5em; /* Slightly smaller text on mobile */
  }
  .banner-text {
    font-size: 1.8em;
  }

  .page-content {
    padding: 1.5em; /* Reduce padding on smaller screens */
  }

  .portfolio-grid {
    /* On mobile, switch to a single-column layout for portfolio items.
       This overrides the minmax(400px, 1fr) which causes overflow. */
    grid-template-columns: 1fr;
  }

  #portfolio {
    /* The 'fixed' background attachment can be buggy and slow on mobile.
       Switching to 'scroll' provides a more reliable experience. */
    background-attachment: scroll;
  }
}