/* Styles for the navigation header */
[data-nav-header] {
  width: 100%;
  margin: 0;
  padding: 0;
  z-index: 1;
  top: 0;
  height: fit-content;
  display: flex;
  justify-content: center;
  background: #fff;
}

/* Positioning options for the navigation */
[data-position="none"] {
  position: relative;
}

[data-position="absolute"] {
  position: absolute;
}

[data-position="fixed"],
[data-mobile-view="true"] {
  position: absolute;
  top: 0;
}

/* Sticky position when scrolled */
[data-position="fixed"][data-scrolled="scrolled"],
[data-mobile-view="true"][data-scrolled="scrolled"] {
  position: sticky;

}

/* General styles for the navigation bar */
[data-nav] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  max-width: 90%;
  width: 100%;
  color: #333;
  padding: 10px 0;
  gap: 20px;
  transition: all 300ms linear;
}

/* Mobile view styles for the navigation */
[data-mobile-view="true"] [data-nav] {
  flex-direction: column;
  align-items: start;
  justify-content: start;
  background: #fff;
}

/* Styling when scrolled */
[data-scrolled="scrolled"] {
  background: #fff;
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}

/* Navigation controls container */
[data-nav-controls] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  flex-direction: row;
}

/* Make controls full width in mobile view */
[data-mobile-view="true"] [data-nav-controls] {
  width: 100%;
}

/* Logo styling */
[data-nav-logo] img {
  width: 100px;
}

/* Navigation toggle button */
[data-nav-toggle] {
  background: transparent;
  cursor: pointer;
  border: none;
  display: none;
}

/* Display toggle button in mobile view */
[data-mobile-view="true"] [data-nav-toggle] {
  display: inline-block;
}

/* Show and hide menu based on toggle state */
[data-nav-toggle][aria-expanded="false"] > [data-menu] {
  display: block;
}

[data-nav-toggle][aria-expanded="true"] > [data-menu] {
  display: none;
}

[data-nav-toggle][aria-expanded="true"] > [data-close] {
  display: block;
}

[data-nav-toggle][aria-expanded="false"] > [data-close] {
  display: none;
}

/* Icons for menu and close buttons */
[data-name="Menu Icon"],
[data-name="Close Icon"] {
  height: 30px;
  width: 30px;
}

[data-name="Menu Icon"] > svg,
[data-name="Close Icon"] > svg {
  fill: inherit;
  width: inherit;
  height: inherit;
}

/* Navigation list styling */
[data-nav-list] {
  display: inline-flex;
  gap: 50px;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  position: static;
  opacity: 1;
  transform: translateY(0);
  width: auto;
  height: auto;
  overflow: unset;
  list-style: none;
}

/* Navigation list in mobile view */
[data-mobile-view="true"] [data-nav-list] {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  transition: all 300ms linear;
  gap: 15px;
  padding: 10px 20px;
  margin: 0;
  position: absolute;
  background-color: inherit;
  left: 0;
  width: 100%;
  max-height: 100vh;
  height: 100vh;
  overflow: auto;
  top: 0;
  padding-bottom: 5rem;
}

/* Initially hide mobile navigation list */
[data-mobile-view="true"] [data-nav-list] {
  opacity: 0;
  transform: translateY(-100vh);
}

/* Show mobile navigation when expanded */
[data-mobile-view="true"] [data-nav-list][aria-hidden="false"] {
  opacity: 1;
  top: 100%;
  transform: translateY(0);
}

/* Navigation list items */
[data-nav-list] > li {
  border-bottom: none;
}

[data-mobile-view="true"] [data-nav-list] > li {
  border-bottom: 1px solid #333;
  width: 100%;
}

/* Links styling inside the navigation header */
[data-nav-header] a,
[data-nav-header] span {
  color: #333;
  text-decoration: none;
}

/* Caret icon styling */
[data-nav-header] [data-caret-icon] {
  fill: inherit;
  height: inherit;
  width: inherit;
}

/* Link hover effect */
[data-nav-header] a:hover {
  text-decoration: underline #ffb536;
  color: #109982;
}

/* Dropdown menu styling */
[data-has-dropdown] {
  position: relative;
  background: inherit;
}

[data-has-dropdown] [data-name="Caret"] {
  display: flex;
  align-items: center;
  font-size: inherit;
}

/* Dropdown default styles */
[data-dropdown][aria-hidden] {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  z-index: 1;
  background: inherit;
  padding: 10px;
  display: flex;
  flex-direction: column;
  white-space: nowrap;
  gap: 10px;
  list-style: none;
  transition: all 200ms linear;
  border-radius: 5px;
  transform: translateY(-100vh);
  opacity: 0;
  background: #fff;
}

/* Dropdown positioning when visible */
[data-dropdown][aria-hidden] {
  position: absolute;
  transform: translateY(0);
  top: 120%;
  left: 0px;
  opacity: 0;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}

[data-dropdown][aria-hidden="false"] {
  opacity: 1;
  top: 100%;
}

/* Mobile dropdown positioning */
[data-mobile-view="true"] [data-dropdown] {
  top: 0;
}

[data-dropdown] a {
  color: #333;
}

/* Adjust dropdown for mobile view */
[data-mobile-view="true"] [data-dropdown][aria-hidden="false"] {
  position: relative;
  opacity: 1;
  transform: translateY(0);
  margin-bottom: 10px;
}

[data-mobile-view="true"] [data-dropdown] li {
  border-bottom: 1px solid #333;
}