/**
 * Header and navigation styles.
 */

/* =============================================================================
   BREADCRUMB
   ============================================================================= */

.layout-container nav[aria-labelledby=system-breadcrumb] {
  display: flex;
  flex-wrap: wrap;
  margin-left: -9px;
  margin-right: -9px;
}

.layout-container nav[aria-labelledby=system-breadcrumb] ol {
  display: flex;
  flex-wrap: wrap;
  margin-left: -9px;
  margin-right: -9px;
  list-style: none;
  padding: 0;
}

.layout-container nav[aria-labelledby=system-breadcrumb] ol li + li {
  margin-left: 16px;
}

.layout-container nav[aria-labelledby=system-breadcrumb] ol li + li::before {
  content: ">";
  position: relative;
  left: -6px;
  top: 2px;
}

/* =============================================================================
   HAMBURGER
   ============================================================================= */

.layout-container .hamburger {
  display: block;
  height: 20px;
  position: absolute;
  right: 20px;
  top: 39px;
  width: 20px;
}

.layout-container .hamburger::after {
  content: "MENU";
  font-size: 16px;
  font-weight: bold;
  color: var(--color-purple);
  position: absolute;
  left: -60px;
  top: 14px;
}

@media (min-width: 768px) {
  .layout-container .hamburger {
    right: 40px;
  }
}

@media (min-width: 1025px) {
  .layout-container .hamburger {
    display: none;
  }
}

.layout-container .hamburger.active > div {
  visibility: hidden;
  width: 20px;
}

.layout-container .hamburger.active > div::before,
.layout-container .hamburger.active > div::after {
  visibility: visible;
  transform-origin: center center;
  transform: translateY(0);
}

.layout-container .hamburger.active > div::before {
  transform: rotate(-45deg);
  animation: burger1 250ms linear;
  width: 20px;
  height: 3px;
}

@keyframes burger1 {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(0); }
  100% { transform: translateY(0) rotate(-45deg); }
}

.layout-container .hamburger.active > div::after {
  transform: rotate(45deg);
  animation: burger2 250ms linear;
  width: 20px;
  height: 3px;
}

@keyframes burger2 {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(0); }
  100% { transform: translateY(0) rotate(45deg); }
}

.layout-container .hamburger > div {
  background-color: transparent;
  left: 50%;
  position: absolute;
  top: 100%;
  transform: translate(-50%, -50%);
  width: 20px;
  border-radius: 2px;
}

.layout-container .hamburger > div::before,
.layout-container .hamburger > div::after {
  background-color: var(--color-purple);
  content: '';
  height: 3px;
  position: absolute;
  width: 20px;
  border-radius: 2px;
}

.layout-container .hamburger > div::before {
  animation: burger3 250ms linear;
  transform: translateY(-4.5px);
}

@keyframes burger3 {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(0); }
  100% { transform: translateY(-6px) rotate(0deg); }
}

.layout-container .hamburger > div::after {
  animation: burger4 250ms linear;
  transform: translateY(4.5px);
  width: 20px;
}

@keyframes burger4 {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(0); }
  100% { transform: translateY(6px) rotate(0deg); }
}

/* =============================================================================
   HEADER — Base
   ============================================================================= */

.layout-container > header {
  background-color: var(--color-white);
  position: relative;
  width: 100vw;
  z-index: 500;
}

.layout-container > header::after {
  content: none;
  width: 100%;
  height: 1px;
  position: absolute;
  top: 63px;
  background: var(--color-white);
}

/* --- Desktop: fixed positioning + scroll-hide ----------------------------- */

@media (min-width: 1025px) {
  /* Fixed: JS inserts a matching spacer div so content always starts below.
     .header-hidden slides the header above the viewport on scroll-down;
     removing it reveals the header on scroll-up. */
  .layout-container > header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transition: transform 0.3s ease;
    height: auto;
    box-shadow: 0 2px 4px rgba(176, 176, 176, 0.5);
  }
  .layout-container > header.header-hidden {
    transform: translateY(-100%);
  }
  .layout-container > header::after {
    content: none;
  }
}

.layout-container > header ul {
  list-style: none;
}

/* =============================================================================
   HEADER — Menu container
   ============================================================================= */

.layout-container > header .menu-container {
  display: flex;
  flex-wrap: wrap;
  max-height: 99px;
  overflow: hidden;
}

@media (min-width: 1025px) {
  .layout-container > header .menu-container {
    max-height: none;
    overflow: visible;
  }
  .layout-container > header:has(#block-envivent-main-menu) .menu-container {
    max-height: none;
  }
  .layout-container > header:has(#block-envivent-main-menu) {
    height: auto;
  }
}

/* =============================================================================
   HEADER — Top bar region
   ============================================================================= */

.layout-container > header .top-bar-region {
  order: 2;
  width: 100%;
}

@media (min-width: 1025px) {
  .layout-container > header .top-bar-region {
    background-color: var(--color-purple);
    border-bottom: 1px solid var(--color-white);
  }
  .layout-container > header .top-bar-region > div {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 9px;
    padding-right: 9px;
  }
  .layout-container > header .top-bar-region a {
    color: var(--color-white);
  }
}

/* =============================================================================
   HEADER — Main header region
   ============================================================================= */

.layout-container > header .main-header-region {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 9px;
  padding-right: 9px;
  order: 1;
}

.layout-container > header .main-header-region > div {
  display: flex;
  flex-wrap: wrap;
  margin-left: -9px;
  margin-right: -9px;
}

@media (min-width: 1025px) {
  .layout-container > header .main-header-region {
    order: 2;
    padding: .5rem 0;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
  }
  .layout-container > header .main-header-region > div {
    max-width: 1440px;
    align-items: center;
  }
}

@media (min-width: 1025px) and (max-width: 1439px) {
  .layout-container > header .main-header-region {
    padding: .5rem 60px;
  }
}

/* =============================================================================
   HEADER — Branding block
   ============================================================================= */

.layout-container > header #block-envivent-branding {
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
  flex: 0 0 100%;
  width: 100%;
  padding: 33px 31px 21px 21px;
}

.layout-container > header #block-envivent-branding::before {
  content: '';
  position: absolute;
  width: calc(100% + 21px);
  height: 19px;
  left: -21px;
  background: var(--color-purple);
  top: 0;
}

@media (min-width: 1025px) {
  .layout-container > header #block-envivent-branding {
    width: 128px;
    flex: initial;
    margin-right: 60px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .layout-container > header #block-envivent-branding::before {
    content: none;
  }
}

@media (min-width: 1025px) and (max-width: 1439px) {
  .layout-container > header #block-envivent-branding {
    padding-left: 0;
    margin-right: 30px;
  }
}

.layout-container > header #block-envivent-branding img {
  height: 45px;
}

.layout-container > header #block-envivent-site-branding a + a {
  display: none;
}

.layout-container > header #block-envivent-site-branding img {
  max-width: 200px;
}

/* =============================================================================
   HEADER — Main menu block container
   ============================================================================= */

.layout-container > header #block-envivent-main-menu {
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
  flex: 0 0 100%;
  width: 100%;
  position: relative;
}

@media (min-width: 1025px) {
  .layout-container > header #block-envivent-main-menu {
    flex: 1;
    padding-top: 0;
  }
}

.layout-container > header h1 {
  color: var(--color-black);
  font-size: 64px;
  margin: 0 0 135px;
}

.layout-container > header h1 span {
  color: var(--color-black);
}

/* =============================================================================
   MOBILE MENU — Active state
   ============================================================================= */

/* --- Shared container rules ----------------------------------------------- */

.layout-container > header .menu-container.active {
  max-height: 100vh;
  min-height: 100vh;
  flex-direction: column;
  flex-wrap: nowrap;
  overflow: auto;
}

/* --- Main menu rules ------------------------------------------------------- */

.layout-container > header .menu-container.active #block-envivent-main-menu ul.menu {
  background: white;
}

.layout-container > header .menu-container.active #block-envivent-main-menu ul.menu a {
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
}

.layout-container > header .menu-container.active #block-envivent-main-menu ul.menu > li {
  position: relative;
}

.layout-container > header .menu-container.active #block-envivent-main-menu ul.menu > li.menu-item--active-trail {
  background-color: var(--color-purple);
}

.layout-container > header .menu-container.active #block-envivent-main-menu ul.menu > li.menu-item--active-trail a {
  color: var(--color-white);
}

.layout-container > header .menu-container.active #block-envivent-main-menu ul.menu > li.menu-item--active-trail.has-children::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='9' viewBox='0 0 15 9' fill='none'%3E%3Cpath d='M7.125 8.09375C6.84375 8.09375 6.59375 8 6.40625 7.8125L0.40625 1.8125C0 1.4375 0 0.78125 0.40625 0.40625C0.78125 0 1.4375 0 1.8125 0.40625L7.125 5.6875L12.4062 0.40625C12.7812 0 13.4375 0 13.8125 0.40625C14.2188 0.78125 14.2188 1.4375 13.8125 1.8125L7.8125 7.8125C7.625 8 7.375 8.09375 7.125 8.09375Z' fill='white'/%3E%3C/svg%3E");
}

.layout-container > header .menu-container.active #block-envivent-main-menu ul.menu > li.menu-item--active-trail ul li {
  background-color: inherit;
}

.layout-container > header .menu-container.active #block-envivent-main-menu ul.menu > li.menu-item--active-trail ul li.menu-item--active-trail a {
  font-weight: var(--fw-bold);
  color: var(--color-purple);
}

.layout-container > header .menu-container.active #block-envivent-main-menu ul.menu > li.menu-item--active-trail ul li.menu-item--active-trail {
  background-color: var(--color-light-pink);
}

.layout-container > header .menu-container.active #block-envivent-main-menu ul.menu > li.menu-item--active-trail ul a {
  color: var(--color-purple);
}

.layout-container > header .menu-container.active #block-envivent-main-menu ul.menu > li a {
  padding: 13px 14px;
  max-width: calc(100% - 48px);
}

/* Dividing line between link text and chevron — 2rem tall pseudo-element */
.layout-container > header .menu-container.active #block-envivent-main-menu ul.menu > li.has-children > a {
  position: relative;
}

.layout-container > header .menu-container.active #block-envivent-main-menu ul.menu > li.has-children > a::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 2rem;
  background-color: var(--color-light-gray-2);
}

.layout-container > header .menu-container.active #block-envivent-main-menu ul.menu > li.menu-item--active-trail.has-children > a::after {
  background-color: var(--color-white);
}

.layout-container > header .menu-container.active #block-envivent-main-menu ul.menu > li.has-children::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 24px;
  transform: translateY(-50%);
  width: 15px;
  height: 9px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='9' viewBox='0 0 15 9' fill='none'%3E%3Cpath d='M7.125 8.09375C6.84375 8.09375 6.59375 8 6.40625 7.8125L0.40625 1.8125C0 1.4375 0 0.78125 0.40625 0.40625C0.78125 0 1.4375 0 1.8125 0.40625L7.125 5.6875L12.4062 0.40625C12.7812 0 13.4375 0 13.8125 0.40625C14.2188 0.78125 14.2188 1.4375 13.8125 1.8125L7.8125 7.8125C7.625 8 7.375 8.09375 7.125 8.09375Z' fill='%23A20067'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.layout-container > header .menu-container.active #block-envivent-main-menu ul.menu .menu-item--expanded .menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  border-left: none;
}

.layout-container > header .menu-container.active #block-envivent-main-menu ul.menu .menu-item--expanded.active .menu {
  max-height: 100vh;
}

.layout-container > header .menu-container.active #block-envivent-main-menu ul.menu .menu-item--expanded.menu-item--active-trail.active .menu {
  border-left: 2px solid var(--color-purple);
}

.layout-container > header .menu-container.active #block-envivent-main-menu ul.menu .menu-item--expanded.active.has-children::after {
  transform: translateY(-50%) rotate(180deg);
}

/* Child items — smaller size, gray color */
.layout-container > header .menu-container.active #block-envivent-main-menu ul.menu .menu-item--expanded .menu a {
  font-weight: var(--fw-light);
  font-size: var(--fs-md);
  color: var(--color-gray-dark);
}

/* Repeated parent link — bold at mobile (higher specificity than child override) */
.layout-container > header .menu-container.active #block-envivent-main-menu ul.menu .menu-item--expanded .menu .menu-item--parent-repeat > a {
  font-weight: var(--fw-bold);
  color: var(--color-gray-dark);
}

/* Parent-repeat active state — user is on the top-level page (class added by JS).
   Selectors intentionally mirror the overriding rules to beat their specificity. */
.layout-container > header .menu-container.active #block-envivent-main-menu ul.menu .menu-item--expanded .menu li.menu-item--parent-repeat.menu-item--parent-repeat--current {
  background-color: var(--color-light-pink);
}
.layout-container > header .menu-container.active #block-envivent-main-menu ul.menu .menu-item--expanded .menu li.menu-item--parent-repeat.menu-item--parent-repeat--current > a {
  color: var(--color-purple);
}

/* --- Top menu rules (mobile only) ----------------------------------------- */

@media (max-width: 1024px) {
  .layout-container > header .menu-container.active #block-topmenu ul.menu {
    background: white;
  }
  .layout-container > header .menu-container.active #block-topmenu ul.menu a {
    font-weight: var(--fw-bold);
    font-size: var(--fs-base);
  }
  .layout-container > header .menu-container.active #block-topmenu ul.menu > li {
    position: relative;
  }
  .layout-container > header .menu-container.active #block-topmenu ul.menu > li.menu-item--active-trail {
    background-color: var(--color-purple);
  }
  .layout-container > header .menu-container.active #block-topmenu ul.menu > li.menu-item--active-trail a {
    color: var(--color-white);
  }
  .layout-container > header .menu-container.active #block-topmenu ul.menu > li.menu-item--active-trail.has-children::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='9' viewBox='0 0 15 9' fill='none'%3E%3Cpath d='M7.125 8.09375C6.84375 8.09375 6.59375 8 6.40625 7.8125L0.40625 1.8125C0 1.4375 0 0.78125 0.40625 0.40625C0.78125 0 1.4375 0 1.8125 0.40625L7.125 5.6875L12.4062 0.40625C12.7812 0 13.4375 0 13.8125 0.40625C14.2188 0.78125 14.2188 1.4375 13.8125 1.8125L7.8125 7.8125C7.625 8 7.375 8.09375 7.125 8.09375Z' fill='white'/%3E%3C/svg%3E");
  }
  .layout-container > header .menu-container.active #block-topmenu ul.menu > li.menu-item--active-trail ul li {
    background-color: inherit;
  }
  .layout-container > header .menu-container.active #block-topmenu ul.menu > li.menu-item--active-trail ul li.menu-item--active-trail {
    background-color: var(--color-light-pink);
  }
  .layout-container > header .menu-container.active #block-topmenu ul.menu > li.menu-item--active-trail ul li.menu-item--active-trail a {
    font-weight: var(--fw-bold);
    color: var(--color-purple);
  }
  .layout-container > header .menu-container.active #block-topmenu ul.menu > li.menu-item--active-trail ul a {
    color: var(--color-purple);
  }
  .layout-container > header .menu-container.active #block-topmenu ul.menu > li a {
    padding: 13px 14px;
    max-width: calc(100% - 48px);
    text-align: left;
  }
  /* Dividing line between link text and chevron — 2rem tall pseudo-element */
  .layout-container > header .menu-container.active #block-topmenu ul.menu > li.has-children > a {
    position: relative;
  }
  .layout-container > header .menu-container.active #block-topmenu ul.menu > li.has-children > a::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 2rem;
    background-color: var(--color-light-gray-2);
  }
  .layout-container > header .menu-container.active #block-topmenu ul.menu > li.menu-item--active-trail.has-children > a::after {
    background-color: var(--color-white);
  }
  .layout-container > header .menu-container.active #block-topmenu ul.menu > li.has-children::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 24px;
    transform: translateY(-50%);
    width: 15px;
    height: 9px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='9' viewBox='0 0 15 9' fill='none'%3E%3Cpath d='M7.125 8.09375C6.84375 8.09375 6.59375 8 6.40625 7.8125L0.40625 1.8125C0 1.4375 0 0.78125 0.40625 0.40625C0.78125 0 1.4375 0 1.8125 0.40625L7.125 5.6875L12.4062 0.40625C12.7812 0 13.4375 0 13.8125 0.40625C14.2188 0.78125 14.2188 1.4375 13.8125 1.8125L7.8125 7.8125C7.625 8 7.375 8.09375 7.125 8.09375Z' fill='%23A20067'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
  }
  .layout-container > header .menu-container.active #block-topmenu ul.menu .menu-item--expanded .menu {
    padding-left: 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    border-left: none;
  }
  .layout-container > header .menu-container.active #block-topmenu ul.menu .menu-item--expanded.active .menu {
    max-height: 100vh;
  }

  .layout-container > header .menu-container.active #block-topmenu ul.menu .menu-item--expanded.menu-item--active-trail.active .menu {
    border-left: 2px solid var(--color-purple);
  }
  .layout-container > header .menu-container.active #block-topmenu ul.menu .menu-item--expanded.active.has-children::after {
    transform: translateY(-50%) rotate(180deg);
  }
  /* Child items — smaller size, gray color */
  .layout-container > header .menu-container.active #block-topmenu ul.menu .menu-item--expanded .menu a {
    font-weight: var(--fw-light);
    font-size: var(--fs-md);
    color: var(--color-gray-dark);
  }
  /* Repeated parent link — bold at mobile (higher specificity than child override) */
  .layout-container > header .menu-container.active #block-topmenu ul.menu .menu-item--expanded .menu .menu-item--parent-repeat > a {
    font-weight: var(--fw-bold);
    color: var(--color-gray-dark);
  }
  /* Parent-repeat active state — user is on the top-level page */
  .layout-container > header .menu-container.active #block-topmenu ul.menu .menu-item--expanded .menu li.menu-item--parent-repeat.menu-item--parent-repeat--current {
    background-color: var(--color-light-pink);
  }
  .layout-container > header .menu-container.active #block-topmenu ul.menu .menu-item--expanded .menu li.menu-item--parent-repeat.menu-item--parent-repeat--current > a {
    color: var(--color-purple);
  }
}

/* --- Top bar region rules -------------------------------------------------- */

/* Top bar region — mobile active */
.layout-container > header .menu-container.active .top-bar-region a {
  font-size: 18px;
  font-weight: 300;
  padding: 13px 14px;
  color: var(--color-purple);
}

/* =============================================================================
   MAIN MENU (#block-envivent-main-menu)
   ============================================================================= */

/* --- Base styles ----------------------------------------------------------- */

#block-envivent-main-menu {
  padding-top: 7px;
}

#block-envivent-main-menu > ul {
  padding-left: 0;
  margin: 0;
}

/* Active trail */
#block-envivent-main-menu > ul li.menu-item--active-trail a {
  color: var(--color-purple);
  font-weight: 900;
}

#block-envivent-main-menu > ul li.menu-item--active-trail ul li.menu-item--active-trail a {
  color: var(--color-purple);
}

/* Links */
#block-envivent-main-menu > ul li a {
  display: flex;
  align-items: center;
  text-decoration: none;
  font-weight: 500;
  color: var(--color-purple);
  padding: 10px 0 28px;
}

#block-envivent-main-menu > ul li a.is-active,
#block-envivent-main-menu > ul li a.menu-item--active-trail {
  color: var(--color-purple);
  font-weight: 900;
}

/* --- Desktop styles ------------------------------------------------------- */

@media (min-width: 1025px) {
  #block-envivent-main-menu > ul {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  #block-envivent-main-menu > ul li:hover .menu,
  #block-envivent-main-menu > ul li:focus-within .menu {
    display: flex;
    flex-direction: column;
  }
  #block-envivent-main-menu > ul li .menu {
    display: none;
    position: absolute;
    background-color: var(--color-light-gray);
    margin-left: 0;
    top: 75px;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 2px 4px rgba(176, 176, 176, 0.5);
  }
  #block-envivent-main-menu > ul li .menu li {
    margin: 0;
  }
  #block-envivent-main-menu > ul li .menu li a {
    padding: 12px 0;
    font-size: 14px;
    color: var(--color-black);
    text-align: center;
    min-height: initial;
    font-weight: normal;
    text-decoration: none;
  }
  #block-envivent-main-menu > ul li .menu li a:hover,
  #block-envivent-main-menu > ul li .menu li a:focus-visible {
    color: var(--color-light-purple);
    text-decoration: none;
  }
  #block-envivent-main-menu > ul li .menu li a.is-active {
    color: var(--color-purple);
  }
  #block-envivent-main-menu > ul li .menu li a.is-active::after {
    content: none;
  }
  #block-envivent-main-menu > ul li .menu li:last-of-type a {
    border-bottom: none;
  }
  #block-envivent-main-menu > ul li .menu li + li {
    margin: 0;
  }
  #block-envivent-main-menu > ul li + li {
    text-align: center;
  }
  #block-envivent-main-menu > ul li a {
    padding: .75rem .5rem .75rem 1rem;
    min-height: 76px;
    color: var(--color-purple);
  }
  #block-envivent-main-menu > ul li a:hover,
  #block-envivent-main-menu > ul li a:focus-visible {
    color: var(--color-pink);
    text-decoration: underline;
  }
  #block-envivent-main-menu > ul > li > a.is-active,
  #block-envivent-main-menu > ul > li > a.menu-item--active-trail {
    border-bottom: 3px solid var(--color-orange);
    &:hover {
      border-bottom: none;
    }
  }
  #block-envivent-main-menu > ul li a.is-active::after,
  #block-envivent-main-menu > ul li a.menu-item--active-trail::after {
    content: none;
    width: 100%;
    height: 2px;
    background-color: transparent;
    display: block;
    margin-top: 2px;
  }
  #block-envivent-main-menu > ul li a.is-active:hover,
  #block-envivent-main-menu > ul li a.menu-item--active-trail:hover {
    text-shadow: none;
  }
}

@media (min-width: 1025px) and (max-width: 1439px) {
  #block-envivent-main-menu > ul li a {
    font-size: 15px;
  }
}

/* --- Large desktop styles ------------------------------------------------- */

@media (min-width: 1312px) {
  #block-envivent-main-menu > ul li a {
    font-size: 20px;
  }
}

/* =============================================================================
   TOP MENU (#block-topmenu)
   ============================================================================= */

/* --- Base styles ----------------------------------------------------------- */

#block-topmenu {
  margin: 0 auto;
}

#block-topmenu > ul {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 0;
}

#block-topmenu > ul li a {
  text-decoration: none;
  padding: 16px 0;
  display: block;
  text-align: center;
  font-weight: 600;
}

/* --- Desktop styles ------------------------------------------------------- */

@media (min-width: 1025px) {
  #block-topmenu {
    padding: 0 135px;
  }
  #block-topmenu > ul {
    display: flex;
    justify-content: flex-end;
  }
  #block-topmenu > ul li {
    padding: 0 34px;
  }
  #block-topmenu > ul li ul {
    display: none;
    position: absolute;
    padding: 0 12px;
    top: 23px;
    border-radius: 0 8px 8px 8px;
    z-index: 20;
  }
  #block-topmenu > ul li ul li {
    padding: 0;
  }
  #block-topmenu > ul li ul li a {
    text-align: center;
    min-height: initial;
  }
  #block-topmenu > ul li ul li a:hover,
  #block-topmenu > ul li ul li a:focus-visible {
    color: var(--color-pink);
    text-shadow: 0.65px 0 var(--color-pink);
  }
  #block-topmenu > ul li ul li:last-of-type a {
    border-bottom: none;
  }
  #block-topmenu > ul li ul li::before {
    display: none;
  }
  #block-topmenu > ul li:hover ul,
  #block-topmenu > ul li:focus-within ul {
    display: flex;
    flex-direction: column;
  }
  #block-topmenu > ul li:first-child {
    padding-left: 0;
  }
  #block-topmenu > ul li:last-child {
    padding-right: 0;
  }
  #block-topmenu > ul li + li {
    position: relative;
    font-size: 0;
  }
  #block-topmenu > ul li + li:nth-of-type(3):hover ul,
  #block-topmenu > ul li + li:nth-of-type(3):focus-within ul {
    margin-left: -32px;
  }
  #block-topmenu > ul li + li::before {
    content: '';
    width: 1px;
    height: 12px;
    background: var(--color-white);
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  #block-topmenu > ul li a {
    padding: 4px 0;
    font-size: 12px;
    line-height: 15px;
    font-weight: 500;
  }
  #block-topmenu > ul li a.is-active {
    text-shadow: 0.65px 0 var(--color-white);
  }
  /* Block-specific styles */
  #block-topmenu.block-envivent-top-menu > ul {
    max-width: 1320px;
    padding: .5rem 0;
  }
  #block-topmenu.block-envivent-top-menu > ul li > a {
    padding: .25rem .5rem;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 700;
  }
  #block-topmenu.block-envivent-top-menu > ul li > a:hover,
  #block-topmenu.block-envivent-top-menu > ul li > a:focus-visible {
    text-decoration: underline;
  }
  #block-topmenu.block-envivent-top-menu > ul li ul {
    top: 37px;
  }
  #block-topmenu.block-envivent-top-menu > ul li ul a:hover,
  #block-topmenu.block-envivent-top-menu > ul li ul a:focus-visible {
    text-decoration: none;
  }
}

@media (min-width: 1025px) and (max-width: 1439px) {
  #block-topmenu {
    padding: 0 36px;
  }
}

/* =============================================================================
   TOP MENU — Desktop dropdown overrides
   ============================================================================= */

@media (min-width: 1025px) {

  /* --- Dropdown container -------------------------------------------------- */

  #block-topmenu > ul li ul {
    background-color: var(--color-white);
    box-shadow: 4px 4px 10px 0 rgba(45, 57, 64, 0.12);
    width: max-content; /* width follows longest item — no text wrapping */
    padding: .75rem;
  }

  /* Prevent link text from wrapping inside the dropdown */
  #block-topmenu > ul li ul li a {
    white-space: nowrap;
  }

  /* --- Dropdown link typography -------------------------------------------- */

  #block-topmenu > ul li ul li a {
    color: var(--color-gray-dark);
    font-family: var(--ff-base);
    font-size: var(--fs-sm); /* 14px / 0.875rem */
    font-style: normal;
    font-weight: 700;
    line-height: var(--lh-base); /* 150% */
    text-align: left;
  }

  /* --- Top-level parent item (items with children) ------------------------- */

  #block-topmenu > ul > li.has-children {
    position: relative;
  }

  /* Flush dropdown below parent — no gap regardless of parent height */
  #block-topmenu > ul > li.has-children > ul {
    top: 100%;
  }

  #block-topmenu > ul > li.has-children > a {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem 0.5rem 0 0;
  }

  /* Hover/focus: white background with shadow, text and chevron become purple */
  #block-topmenu > ul > li.has-children:hover > a,
  #block-topmenu > ul > li.has-children:focus-within > a {
    background: var(--color-white);
    box-shadow: 4px 4px 10px 0 rgba(45, 57, 64, 0.12);
    color: var(--color-purple);
  }

  /* --- Items without children — button treatment --------------------------- */

  #block-topmenu > ul > li:not(.has-children) > a {
    border-radius: 0.5rem;
  }

  #block-topmenu > ul > li:not(.has-children):hover > a,
  #block-topmenu > ul > li:not(.has-children):focus-within > a {
    background: var(--color-white);
    box-shadow: 4px 4px 10px 0 rgba(45, 57, 64, 0.12);
    color: var(--color-purple);
  }

  /* --- Chevron indicator --------------------------------------------------- */

  /* Default: white chevron on purple top bar */
  #block-topmenu > ul > li.has-children > a::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 5px;
    flex-shrink: 0;
    margin-left: 0.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3E%3Cpath d='M3.76917 4.47167L0 0.7025L0.7025 0L3.76917 3.06667L6.83583 0L7.53833 0.7025L3.76917 4.47167Z' fill='white'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    align-self: center;
  }

  /* Hover/focus: purple chevron on white container */
  #block-topmenu > ul > li.has-children:hover > a::after,
  #block-topmenu > ul > li.has-children:focus-within > a::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3E%3Cpath d='M3.76917 4.47167L0 0.7025L0.7025 0L3.76917 3.06667L6.83583 0L7.53833 0.7025L3.76917 4.47167Z' fill='%23a20067'/%3E%3C/svg%3E");
  }
}

/* =============================================================================
   MAIN MENU — Desktop overrides
   ============================================================================= */

@media (min-width: 1025px) {

  /* --- Items without children — button-style hover treatment --------------- */

  #block-envivent-main-menu > ul > li:not(.has-children) > a {
    border-radius: 0.5rem;
  }

  /* Active state: flatten bottom corners so the orange border-bottom is straight.
     Restored to full radius on hover (the background pill needs all corners). */
  #block-envivent-main-menu > ul > li:not(.has-children) > a.is-active:not(:hover),
  #block-envivent-main-menu > ul > li:not(.has-children) > a.menu-item--active-trail:not(:hover) {
    border-radius: 0.5rem 0.5rem 0 0;
  }

  /* Hide the active-trail underline while the submenu is open. */
  #block-envivent-main-menu > ul > li.has-children:hover > a.is-active,
  #block-envivent-main-menu > ul > li.has-children:hover > a.menu-item--active-trail,
  #block-envivent-main-menu > ul > li.has-children:focus-within > a.is-active,
  #block-envivent-main-menu > ul > li.has-children:focus-within > a.menu-item--active-trail {
    border-bottom: none;
  }

  #block-envivent-main-menu > ul > li:not(.has-children):hover > a,
  #block-envivent-main-menu > ul > li:not(.has-children):focus-within > a {
    background-color: var(--color-light-pink);
    box-shadow: 4px 4px 10px 0 rgba(45, 57, 64, 0.12);
    color: var(--color-pink);
    text-decoration: underline;
  }

  /* --- Items with children — chevron + hover treatment --------------------- */

  #block-envivent-main-menu > ul > li.has-children > a {
    display: flex;
    align-items: center;
    border-radius: 0.5rem 0.5rem 0 0;
  }

  /* Chevron — always visible (purple) */
  #block-envivent-main-menu > ul > li.has-children > a::after {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-left: 0.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M11.6635 14.6193C11.5597 14.5808 11.4609 14.5148 11.3673 14.4213L6.873 9.92701C6.73467 9.78851 6.66384 9.61443 6.6605 9.40476C6.65734 9.19526 6.72817 9.01801 6.873 8.87301C7.018 8.72818 7.19367 8.65576 7.4 8.65576C7.60634 8.65576 7.782 8.72818 7.927 8.87301L12 12.9463L16.073 8.87301C16.2115 8.73468 16.3856 8.66385 16.5953 8.66051C16.8048 8.65735 16.982 8.72818 17.127 8.87301C17.2718 9.01801 17.3443 9.19368 17.3443 9.40001C17.3443 9.60635 17.2718 9.78201 17.127 9.92701L12.6328 14.4213C12.5391 14.5148 12.4403 14.5808 12.3365 14.6193C12.2327 14.6578 12.1205 14.677 12 14.677C11.8795 14.677 11.7673 14.6578 11.6635 14.6193Z' fill='%23A20067'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    align-self: center;
  }

  /* Hover/focus: light-pink background with shadow, text becomes pink */
  #block-envivent-main-menu > ul > li.has-children:hover > a,
  #block-envivent-main-menu > ul > li.has-children:focus-within > a {
    background-color: var(--color-light-pink);
    box-shadow: 4px 4px 10px 0 rgba(45, 57, 64, 0.12);
    color: var(--color-pink);
  }

  /* Dropdown — light-pink background to match parent hover */
  #block-envivent-main-menu > ul > li.has-children .menu {
    background-color: var(--color-light-pink);
    padding: 1.25rem;
    box-shadow: 4px 4px 10px 0 rgba(45, 57, 64, 0.12);
    width: 26.875rem;
  }

  /* --- Repeated parent link (first item in dropdown) ----------------------- */
  /* Higher specificity than the base `#block-envivent-main-menu > ul li .menu li a` rule */

  #block-envivent-main-menu > ul li .menu li.menu-item--parent-repeat > a {
    color: var(--color-purple);
    font-family: var(--ff-base);
    font-size: 1.5rem;
    font-weight: 350;
    line-height: 120%;
    border-bottom: 4px solid var(--color-orange);
    margin-bottom: 0.5rem;
    text-decoration: none;
    white-space: normal;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  #block-envivent-main-menu > ul li .menu li.menu-item--parent-repeat > a::after {
    content: '';
    display: inline-block;
    flex-shrink: 0;
    width: 20px;
    height: 13px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='13' viewBox='0 0 20 13' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.8998 5.98C19.7663 5.85 19.7663 5.72 19.6327 5.59L14.2905 0.39C13.7563 -0.13 12.9549 -0.13 12.4207 0.39C11.8865 0.91 11.8865 1.69 12.4207 2.21L15.4925 5.2H1.33556C0.534224 5.2 0 5.72 0 6.5C0 7.28 0.534224 7.8 1.33556 7.8H15.4925L12.4207 10.79C11.8865 11.31 11.8865 12.09 12.4207 12.61C12.6878 12.87 13.0885 13 13.3556 13C13.6227 13 14.0234 12.87 14.2905 12.61L19.6327 7.41C19.7663 7.28 19.8998 7.15 19.8998 7.02C20.0334 6.63 20.0334 6.37 19.8998 5.98Z' fill='%23A20067'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    transition: transform 0.2s ease;
  }

  #block-envivent-main-menu > ul li .menu li.menu-item--parent-repeat > a:hover,
  #block-envivent-main-menu > ul li .menu li.menu-item--parent-repeat > a:focus-visible {
    text-decoration: underline;
  }

  #block-envivent-main-menu > ul li .menu li.menu-item--parent-repeat > a:hover::after,
  #block-envivent-main-menu > ul li .menu li.menu-item--parent-repeat > a:focus-visible::after {
    transform: translateX(4px);
  }

  /* --- Last has-children item — right-align dropdown so it stays on screen - */

  #block-envivent-main-menu > ul > li.has-children:not(:has(~ li.has-children)) .menu {
    right: 63px;
    left: auto;
  }
}

/* =============================================================================
   KEYBOARD NAVIGATION — Focus visible indicators (WCAG 2.1 AA)
   ============================================================================= */

/* Top-level nav links */
#block-envivent-main-menu > ul li > a:focus-visible,
#block-topmenu > ul li > a:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Dropdown / submenu links */
@media (min-width: 1025px) {
  #block-envivent-main-menu > ul li .menu li a:focus-visible {
    outline: 3px solid var(--color-purple);
    outline-offset: 2px;
    border-radius: 2px;
  }

  #block-topmenu > ul li ul li a:focus-visible {
    outline: 3px solid var(--color-purple);
    outline-offset: 2px;
    border-radius: 2px;
  }
}