/* Content-Type: text/css - CSS Styles for Navigation Menu */
@charset "utf-8";
/* === Variables (Consider defining menu-specific colors or using globals from visual.css) === */
:root {
  --menu-bg-color: #bcccea; /* Original background */
  --menu-link-color: #8faadf; /* Original link color */
  --menu-hover-bg-color: #8faadc; /* Original hover background */
  --menu-hover-link-color: white; /* Original hover link color */
  --menu-breakpoint: 870px; /* Breakpoint for responsive toggle */
}
/* === Main Navigation Container === */
.topnav {
  /* Replaced float and overflow with Flexbox */
  display: flex;
  justify-content: flex-end; /* Align items to the right */
  align-items: center; /* Vertically center items */
  background-color: var(--menu-bg-color);
  border-radius: 10px;
  margin: 25px 10px 25px 10px; /* Adjusted right margin slightly */
  padding: 0 10px; /* Add some padding for spacing */
  flex-wrap: wrap; /* Allow items to wrap if needed, though unlikely here */
  position: relative; /* Needed for absolute positioning of responsive icon */
}
/* === Navigation Links === */
.topnav a,
.dropdown .dropbtn { /* Style button like links */
  /* Removed float */
  display: block; /* Or inline-block if preferred */
  color: var(--menu-link-color);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  border: none; /* Ensure button has no border */
  outline: none; /* Ensure button has no outline */
  background-color: transparent; /* Ensure button background matches */
  font-family: inherit; /* Ensure button font matches */
  margin: 0; /* Ensure button has no margin */
  cursor: pointer; /* Add pointer cursor to button */
  white-space: nowrap; /* Prevent links/button text from wrapping */
  transition: background-color 0.2s ease, color 0.2s ease; /* Smooth transition */
}
/* === Active Link === */
.topnav a.active {
  /* Keep background subtle or remove if hover is enough */
  /* background-color: var(--menu-bg-color); */
  color: var(--menu-hover-link-color); /* Use hover color for active state */
  font-weight: bold; /* Make active link bolder */
}
/* === Hamburger Icon (for small screens) === */
.topnav .icon {
  display: none; /* Hidden by default */
  /* Style it like other links/buttons */
  padding: 14px 16px;
  font-size: 20px; /* Make icon slightly larger */
  color: var(--menu-link-color);
  cursor: pointer;
}
/* === Dropdown Container === */
.dropdown {
  /* Removed float */
  position: relative; /* Needed for absolute positioning of dropdown content */
  /* overflow: hidden; -- Not needed with relative positioning */
}
/* Dropdown Button specific styles (if any needed beyond general link styles) */
/* .dropdown .dropbtn { ... } */
/* === Dropdown Content === */
.dropdown-content {
  display: none;
  position: absolute;
  top: 100%; /* Position below the button */
  left: 0; /* Align with the left edge of the button */
  background-color: var(--menu-bg-color);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 10; /* Ensure it's above other content */
  border-radius: 0px 0px 15px 15px; /* Adjust radius for bottom corners */
  overflow: hidden; /* Ensures content respects border-radius */
}
/* === Dropdown Links === */
.dropdown-content a {
  /* Removed float */
  color: var(--menu-link-color);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  transition: background-color 0.2s ease, color 0.2s ease; /* Smooth transition */
}
/* === Hover States === */
.topnav a:hover,
.dropdown:hover .dropbtn,
.topnav .icon:hover {
  background-color: var(--menu-hover-bg-color);
  color: var(--menu-hover-link-color);
}
.dropdown-content a:hover {
  background-color: var(--menu-hover-bg-color);
  color: var(--menu-hover-link-color);
}
/* === Focus States (Accessibility) === */
.topnav a:focus,
.dropdown .dropbtn:focus,
.topnav .icon:focus {
    outline: 2px solid var(--menu-link-color); /* Example focus style */
    outline-offset: 2px;
    background-color: var(--menu-hover-bg-color); /* Optional: match hover */
    color: var(--menu-hover-link-color); /* Optional: match hover */
}
.dropdown-content a:focus {
    outline: 2px solid var(--menu-link-color);
    outline-offset: -2px; /* Inside */
    background-color: var(--menu-hover-bg-color);
    color: var(--menu-hover-link-color);
}
/* === Dropdown Visibility on Hover === */
.dropdown:hover .dropdown-content {
  display: block;
}
/* === Responsive Styles === */
@media screen and (max-width: var(--menu-breakpoint)) {
  .topnav {
    justify-content: space-between; /* Space out logo/brand and icon */
    /* margin: 15px 10px; */ /* Optional: Adjust margin */
  }
  /* Hide all direct links and dropdown buttons */
  .topnav a:not(.icon),
  .dropdown .dropbtn {
    display: none;
  }
  /* Show the hamburger icon */
  .topnav a.icon {
    display: block; /* Show the icon */
    order: 1; /* Ensure icon is typically on the right */
  }
  /* Keep the first link (e.g., Home or Logo link) visible if needed */
  /* .topnav a:first-child {
    display: block;
    order: 0;
  } */
  /* Styles when the menu is toggled open */
  .topnav.responsive {
    flex-direction: column; /* Stack items vertically */
    align-items: flex-start; /* Align items to the left */
    padding: 10px; /* Adjust padding */
  }
  .topnav.responsive .icon {
    position: absolute; /* Position icon top-right within the container */
    right: 10px;
    top: 10px;
    order: 0; /* Reset order if needed */
  }
  /* Show links and dropdown button when responsive */
  .topnav.responsive a,
  .topnav.responsive .dropdown .dropbtn {
    display: block; /* Make them block level */
    width: 100%; /* Take full width */
    text-align: left; /* Align text left */
    padding: 10px 15px; /* Adjust padding */
    box-sizing: border-box; /* Include padding in width */
  }
  /* Adjust dropdown container in responsive mode */
  .topnav.responsive .dropdown {
    width: 100%; /* Take full width */
  }
  /* Dropdown content positioning in responsive mode */
  .topnav.responsive .dropdown-content {
    position: static; /* Change from absolute to static */
    box-shadow: none; /* Remove shadow */
    border-radius: 0; /* Remove radius */
    background-color: transparent; /* Optional: Remove background or adjust */
    padding-left: 15px; /* Indent dropdown links */
    min-width: auto; /* Reset min-width */
    display: none; /* Ensure it's hidden until dropdown is hovered/focused */
  }
  /* Ensure dropdown content shows on hover/focus within responsive */
   .topnav.responsive .dropdown:hover .dropdown-content,
   .topnav.responsive .dropdown .dropbtn:focus + .dropdown-content, /* Show on button focus */
   .topnav.responsive .dropdown .dropdown-content:focus-within { /* Keep open if link inside has focus */
      display: block;
   }
  .topnav.responsive .dropdown-content a {
    padding: 8px 15px; /* Adjust padding */
    color: var(--menu-link-color); /* Ensure color consistency */
  }
  .topnav.responsive .dropdown-content a:hover,
  .topnav.responsive .dropdown-content a:focus {
    background-color: var(--menu-hover-bg-color); /* Match hover */
    color: var(--menu-hover-link-color);
  }
}