/**
 * Material Design 3 Style Tabs
 */

/* Direct styling for tab containers */
.region-content nav ul.menu,
nav ul.menu--level-1 {
  display: flex !important;
  background-color: white !important;
  margin: 0 0 24px 0 !important;
  padding: 0 !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
  overflow: hidden !important;
  list-style: none !important;
  justify-content: center !important;
  width: 100% !important;
}

/* Direct styling for the tab items */
.region-content nav ul.menu li.menu__item,
nav ul.menu--level-1 li.menu__item {
  flex: 1 !important;
  text-align: center !important;
  margin: 0 !important;
  position: relative !important;
  list-style-type: none !important;
  padding: 0 !important;
  max-width: 200px !important;
}

/* Direct styling for the tab links */
.region-content nav ul.menu li.menu__item a.menu__link,
nav ul.menu--level-1 li.menu__item a.menu__link {
  padding: 12px 20px !important;
  text-decoration: none !important;
  color: #555 !important;
  font-weight: 500 !important;
  position: relative !important;
  transition: all 0.3s ease !important;
  overflow: hidden !important;
  text-align: center !important;
  border: none !important;
  background-color: transparent !important;
  margin: 0 !important;
  height: auto !important;
  line-height: 1.5 !important;
}

/* Specific styling for the currently active tab */
.region-content nav ul.menu li.menu__item a.menu__link.is-active,
nav ul.menu--level-1 li.menu__item a.menu__link.is-active,
.region-content nav ul.menu li.menu__item a.menu__link[aria-current="page"],
nav ul.menu--level-1 li.menu__item a.menu__link[aria-current="page"] {
  color: #0d77b5 !important;
  font-weight: 600 !important;
}

/* Underline indicator for the active tab */
.region-content nav ul.menu li.menu__item a.menu__link.is-active::after,
nav ul.menu--level-1 li.menu__item a.menu__link.is-active::after,
.region-content nav ul.menu li.menu__item a.menu__link[aria-current="page"]::after,
nav ul.menu--level-1 li.menu__item a.menu__link[aria-current="page"]::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 3px !important;
  background-color: #0d77b5 !important;
}

/* Hover state for the tabs */
.region-content nav ul.menu li.menu__item a.menu__link:hover,
nav ul.menu--level-1 li.menu__item a.menu__link:hover {
  background-color: rgba(13, 119, 181, 0.05) !important;
  color: #0d77b5 !important;
}

/* Ripple effect for click feedback */
.region-content nav ul.menu li.menu__item a.menu__link::before,
nav ul.menu--level-1 li.menu__item a.menu__link::before {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 0 !important;
  height: 0 !important;
  background-color: rgba(13, 119, 181, 0.1) !important;
  border-radius: 50% !important;
  transform: translate(-50%, -50%) !important;
  transition: width 0.3s ease, height 0.3s ease !important;
  z-index: 1 !important;
}

.region-content nav ul.menu li.menu__item a.menu__link:active::before,
nav ul.menu--level-1 li.menu__item a.menu__link:active::before {
  width: 200px !important;
  height: 200px !important;
}

/* Responsive adjustments for small screens */
@media (max-width: 600px) {
  .region-content nav ul.menu,
  nav ul.menu--level-1 {
    flex-direction: column !important;
    background-color: transparent !important;
    box-shadow: none !important;
    align-items: center !important;
  }

  .region-content nav ul.menu li.menu__item,
  nav ul.menu--level-1 li.menu__item {
    margin-bottom: 8px !important;
    background-color: white !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
    width: 90% !important;
    max-width: 300px !important;
  }

  .region-content nav ul.menu li.menu__item a.menu__link.is-active::after,
  nav ul.menu--level-1 li.menu__item a.menu__link.is-active::after,
  .region-content nav ul.menu li.menu__item a.menu__link[aria-current="page"]::after,
  nav ul.menu--level-1 li.menu__item a.menu__link[aria-current="page"]::after {
    width: 3px !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
  }
}

/* Desktop enhancements - improve the tab appearance on larger screens */
@media (min-width: 768px) {
  .region-content nav ul.menu,
  nav ul.menu--level-1 {
    max-width: 800px !important;
    margin: 0 auto 24px auto !important;
  }
  
  .region-content nav ul.menu li.menu__item,
  nav ul.menu--level-1 li.menu__item {
    margin: 0 4px !important;
    border-radius: 4px 4px 0 0 !important;
  }
  
  .region-content nav ul.menu li.menu__item a.menu__link,
  nav ul.menu--level-1 li.menu__item a.menu__link {
    padding: 14px 24px !important;
    font-size: 16px !important;
  }
}