/* Header Component Styles */

/* Import Fonts (Optional - using common sans-serif stack) */
/* @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Open+Sans:wght@400;600&display=swap'); */

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #213a5a; /* Dark Blue background */
  border-bottom: 1px solid #39587a; /* Slightly lighter border */
  z-index: 1000;
  padding: 1.5rem 0; /* Increased vertical padding */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  font-family: "Lato", "Open Sans", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  transition: background-color 0.3s ease;
}

.header-container {
  display: flex;
  justify-content: space-between; /* Revert to space-between */
  align-items: center;
  padding: 0 1.5rem; /* Consistent padding L/R */
}

.logo {
  /* Added margin-left for spacing */
  margin-left: 5px;
}

.logo a {
  color: #ffffff; /* White logo text */
  text-decoration: none; /* Remove underline */
  font-size: 1.6rem; /* Increased base logo size */
  font-weight: 700;
  display: flex;
  align-items: center;
  white-space: nowrap; /* Prevent logo text wrapping */
}

.logo .fa-shield-alt {
  margin-right: 0.5rem;
  color: #ffffff; /* White logo icon */
}

/* Mobile Menu Toggle */
.menu-toggle {
  display: block; /* Visible by default on mobile */
  background: none;
  border: none;
  font-size: 1.7rem; /* Slightly larger */
  cursor: pointer;
  color: #ffffff; /* White icon */
  padding: 0.25rem;
}

/* Main Navigation - Hidden by default on mobile */
#main-nav {
  display: none;
}

#main-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
}

#main-nav li {
  /* Desktop base spacing - set in media query */
}

#main-nav li:first-child {
  margin-left: 0;
}

/* Base styles for #main-nav a (apply everywhere unless overridden) */
#main-nav a {
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1rem; /* Increased base font size */
  padding: 0.5rem 0; /* Existing padding, review if needed */
  position: relative;
  transition: color 0.3s ease;
}

#main-nav a:hover,
#main-nav a:focus,
#main-nav a.active {
  /* Hover color set in mobile/desktop specific rules */
}

/* Optional: Underline effect on hover */
#main-nav a::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #ffffff; /* White underline */
  transition: width 0.3s ease;
}

#main-nav a:hover::after,
#main-nav a:focus::after,
#main-nav a.active::after {
  width: 100%;
}

/* Style for the 'Get Evaluation' button within the nav */
#main-nav .btn.open-modal-btn {
  margin-top: 0;
  /* Desktop base spacing - set in media query */
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  white-space: nowrap; /* Prevent button text wrapping */
}

/* --- Desktop Styles (Breakpoint: 768px and up) --- */
@media (min-width: 768px) {
  /* Base Desktop Styles (Apply to all desktop unless overridden) */
  .logo {
    margin-left: 10px; /* Increased margin for desktop */
  }
  .logo a {
    font-size: 1.7rem; /* Increased desktop logo size */
  }
  .menu-toggle {
    display: none;
  }
  #main-nav {
    display: block;
  }
  #main-nav a {
    color: #ced4da;
    white-space: nowrap;
  }
  #main-nav a:hover,
  #main-nav a:focus,
  #main-nav a.active {
    color: #ffffff; /* Base desktop hover color */
  }

  /* --- Narrow Desktop Specific Styles (768px - 991px) --- */
  #main-nav li {
    margin-left: 0.4rem; /* Slightly increased spacing */
  }
  #main-nav .btn.open-modal-btn {
    margin-left: 0.4rem; /* Slightly increased spacing */
    padding: 0.4rem 0.6rem;
  }
  #main-nav a {
    font-size: 1.05rem; /* Adjusted font size for narrow desktop */
  }
}

/* --- Medium Desktop adjustments (992px and up) --- */
@media (min-width: 992px) {
  #main-nav li {
    margin-left: 0.6rem; /* Slightly increased spacing */
  }
  #main-nav .btn.open-modal-btn {
    margin-left: 0.6rem; /* Slightly increased spacing */
    padding: 0.5rem 1rem;
  }
  #main-nav a {
    font-size: 1.1rem; /* Adjusted font size for medium desktop */
  }
}

/* --- Large Desktop adjustments (1200px and up) --- */
@media (min-width: 1200px) {
  #main-nav li {
    margin-left: 0.7rem; /* Slightly increased spacing */
  }
  #main-nav .btn.open-modal-btn {
    margin-left: 0.7rem; /* Slightly increased spacing */
  }
}

/* --- Translator Placeholder Styling --- */
.translator-placeholder {
  position: absolute;
  top: 0; /* Keep at top edge */
  left: 0; /* Changed from right: 0 to position on the left */
  right: auto; /* Explicitly remove right positioning */
  z-index: 1001; /* Ensure it's above other header content but potentially below modals */
  padding: 5px; /* Add slight padding so content isn't flush with edges */
}

/* Style the wrapper directly */
.translator-placeholder .gtranslate_wrapper {
  margin-bottom: 20px; /* Add bottom margin */
}

/* --- Mobile Menu Active State --- */
@media (max-width: 767px) {
  /* Apply only below desktop breakpoint */
  #main-nav.active {
    display: block; /* Show the nav */
    position: absolute;
    top: 100%; /* Position directly below the header */
    left: 0;
    right: 0;
    background-color: #213a5a; /* Match header background */
    padding: 1.5rem; /* Slightly increased padding */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
    border-top: 1px solid #39587a; /* Separator from header */
  }

  #main-nav.active ul {
    display: block; /* Stack nav items vertically */
    text-align: left; /* Align text left */
  }

  #main-nav.active li {
    margin-left: 0;
    margin-bottom: 1.2rem;
  }

  #main-nav.active li:last-child {
    margin-bottom: 0;
  }

  #main-nav.active a {
    padding: 0.7rem 0; /* Increased padding for better tap targets */
    display: block;
    color: #ffffff;
    font-size: 1.15rem; /* Increased font size for mobile nav links */
  }

  #main-nav.active .btn.open-modal-btn {
    display: block;
    margin-left: 0;
    margin-top: 1rem;
    text-align: center;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1.05rem; /* Slightly increased font size for mobile button */
  }

  /* Hide the underline effect on mobile */
  #main-nav.active a::after {
    display: none;
  }
}