.c-main-menu .menu-item .menu:hover {
  display: block;
}

.c-main-menu > .menu > li > a {
  font-size: max(1.00rem, min(calc(0.8rem + 0.35vw), 1.25rem));
  font-size: var(--step-0);
  display: flex;
  align-items: center;
}

.c-main-menu > .menu  .menu {
  box-shadow: 2px 2px #D6D3CF;
  outline: 2px solid transparent; /* Helpful in dark mode*/
}

/* Menu dropdown */

.menu .menu-item--expanded .menu .menu-item a {
  z-index: 1;
}

.c-main-menu .menu-item .menu {
  z-index: 1;
}


.c-site-header nav > .menu {
  display: none;
}


@media (min-width: 990px) {


.c-site-header nav > .menu {
    display: flex;
    grid-column: 2;
    gap: max(0.50rem, min(calc(0.46rem + 0.17vw), 0.63rem));
    gap: var(--space-2xs);
}
  }

@media (min-width: 990px) {

#block-cpag-theme-mainnavigation,
.block-responsive-menu-horizontal-menu {
    grid-column: 1 / 3;
}
  }

@media (min-width: 1240px) {

#block-cpag-theme-mainnavigation,
.block-responsive-menu-horizontal-menu {
    grid-column: 2;
}
  }

.menu a:focus {
  outline-offset: -3px;
}

.menu--account {
  --primary-button-bg-color-hover: var(--color-hotpink);
  --primary-button-text-color-hover: var(--color-white);
  align-self: flex-start;
  font-size: max(0.83rem, min(calc(0.79rem + 0.23vw), 1.00rem));
  font-size: var(--step--1);
}

.menu--account a {
  /*border: 1px solid;*/
  display: block;
}

.menu--account .menu > li a {
  /*--primary-button-bg-color-hover: var(--color-hotpink);
  --primary-button-text-color-hover: var(--color-white);*/
  background-color: #201C40;
  background-color: var(--color-deep-purple);
  color: #FFF;
  color: var(--color-white);
  border: 1px solid #201C40;
  border: 1px solid var(--color-deep-purple);
}

.menu--account .menu > li a:hover {
    background-color: #FFA902;
    background-color: var(--primary-button-bg-color-hover);
    color: #201C40;
    color: var(--primary-button-text-color-hover);
    border: 1px solid #FFA902;
    border: 1px solid var(--primary-button-bg-color-hover);
  }

.menu--account .menu > li a:focus {
    outline-offset: -4px;
    outline-color: #FFF;
    outline-color: var(--color-white);
  }

.menu--utility-menu {
  align-self: center;
  font-size: max(0.83rem, min(calc(0.79rem + 0.23vw), 1.00rem));
  font-size: var(--step--1);
}

.menu--utility-menu .menu{
  gap: 5px;
}

.c-main-menu .menu-item {
  padding: 0 !important;
}

.c-main-menu > ul > li > a,
.horizontal-menu > li > a {
  background: none;
  color: #FFF;
  color: var(--main-nav-link-color);
  padding: max(0.75rem, min(calc(0.70rem + 0.26vw), 0.94rem));
  padding: var(--space-xs);
  height: 3rem;
}

.c-main-menu > ul > li > a:hover, .horizontal-menu > li > a:hover {
    color: #201C40 !important;
    color: var(--main-nav-hover-color) !important;
  }

.c-main-menu > ul > li > a:hover, .horizontal-menu > li > a:hover {
    background: #FFA902;
    background: var(--main-nav-hover-bg-color);
  }

.c-main-menu > ul > li:focus-within > a,
.horizontal-menu > li:focus-within > a {
  color: inherit;
}

.c-main-menu > ul > li:last-of-type a,
.horizontal-menu > li:last-of-type a {
  background-color: #CF0072;
  background-color: var(--color-hotpink);
  color: #FFF;
  color: var(--color-white);
}

.c-main-menu > ul > li:last-of-type a:hover, .horizontal-menu > li:last-of-type a:hover {
    background: #FFA902;
    background: var(--color-yellow);
    color: #201C40;
    color: var(--color-deep-purple);
  }

.c-main-menu > ul > li:last-of-type a:focus, .horizontal-menu > li:last-of-type a:focus {
    background: #FFA902;
    background: var(--color-yellow);
    color: #201C40;
    color: var(--color-deep-purple);
  }

.menu--utility-menu .ext svg {
  display: none;
}

.menu--utility-menu a {
  width: -moz-max-content;
  width: max-content;
}

.menu--utility-menu .menu > li:last-of-type a {
  background-color: #FFA902;
  background-color: var(--color-yellow);
}

.menu--utility-menu .menu > li:last-of-type a:hover {
    background-color: #201C40;
    background-color: var(--color-deep-purple);
    color: #FFF;
    color: var(--color-white);
  }

.menu--utility-menu .menu > li:last-of-type a:focus {
    outline-color: #201C40;
    outline-color: var(--color-deep-purple);
  }

.menu--account,
.menu--utility-menu {
  padding-right: 2rem;
}

/* Responsive menu stylings */
.responsive-menu-toggle-icon {
  height: 65px;
}

.responsive-menu-toggle-icon span.label {
  /* color: var(--color-deep-purple); */
  text-transform: none;
  top: 1.5rem;
  left: 0;
  margin-top: 1rem;
}

/* Main menu - Second level */
.c-main-menu > ul > .menu-item--expanded > a::after, .horizontal-menu > .menu-item--expanded > a::after {
    content: url("data:image/svg+xml,%3Csvg width%3D%2210%22 height%3D%227%22 viewBox%3D%220 0 10 7%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M5.08008 6.25L9.41021 0.625001L0.74995 0.625001L5.08008 6.25Z%22 fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");
    margin-left: 0.25em;
  }
.c-main-menu > ul > .menu-item--expanded > a:hover::after, .horizontal-menu > .menu-item--expanded > a:hover::after {
      filter: brightness(0) saturate(100%) invert(9%) sepia(34%) saturate(3167%) hue-rotate(228deg) brightness(85%) contrast(93%);
    }

.c-main-menu .menu .menu a,
.horizontal-menu .sub-nav a{
  background-color: #FFF;
  background-color: var(--color-white);
  color: #201C40;
  color: var(--color-deep-purple);
  font-size: max(0.83rem, min(calc(0.79rem + 0.23vw), 1.00rem));
  font-size: var(--step--1);
  font-weight: 500;
  line-height: 1.2;
  width: 100%;
}

.c-main-menu .menu .menu a:hover, .horizontal-menu .sub-nav a:hover {
    background-color: #FFA902;
    background-color: var(--color-yellow);
    color: #201C40;
    color: var(--color-deep-purple);
  }

/* .responsive-menu-toggle-icon .icon:before,
.responsive-menu-toggle-icon .icon:after, */
.responsive-menu-toggle-icon span.icon {
  position: static;
  position: initial;
  width: 30px;
  height: 26px;

  /* margin-bottom: 5px;
  margin-top: 5px; */
  background: url("data:image/svg+xml,%3Csvg width%3D%2241%22 height%3D%2240%22 viewBox%3D%220 0 41 40%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg id%3D%22hamburger-menu%22%3E%3Cg id%3D%22menu%22%3E%3Cpath d%3D%22M4.07422 10.8996C4.07422 10.016 4.77577 9.2998 5.64118 9.2998H33.8465C34.712 9.2998 35.4135 10.016 35.4135 10.8996C35.4135 11.7831 34.712 12.4994 33.8465 12.4994H5.64118C4.77577 12.4994 4.07422 11.7831 4.07422 10.8996Z%22 fill%3D%22currentColor%22%2F%3E%3Cpath d%3D%22M4.07422 20.5498C4.07422 19.6663 4.77577 18.95 5.64118 18.95H33.8465C34.712 18.95 35.4135 19.6663 35.4135 20.5498C35.4135 21.4333 34.712 22.1496 33.8465 22.1496H5.64118C4.77577 22.1496 4.07422 21.4333 4.07422 20.5498Z%22 fill%3D%22currentColor%22%2F%3E%3Cpath d%3D%22M5.64118 28.6002C4.77577 28.6002 4.07422 29.3165 4.07422 30.2C4.07422 31.0836 4.77577 31.7998 5.64118 31.7998H33.8465C34.712 31.7998 35.4135 31.0836 35.4135 30.2C35.4135 29.3165 34.712 28.6002 33.8465 28.6002H5.64118Z%22 fill%3D%22currentColor%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  display: block;
  background-size: cover;

}

.responsive-menu-toggle-icon:hover .icon {
    filter: invert(17%) sepia(98%) saturate(4027%) hue-rotate(315deg) brightness(78%) contrast(112%);

}

#toggle-icon label{
  display: block !important;
}




.mm-panels {
  font-family: 'Poppins', sans-serif;
  font-family: var(--font-brand);
  z-index: 9;

  --mm-color-border: rgba(242, 240, 236, 0.2);
  --mm-color-button: var(--color-white);
  --mm-color-text: var(--color-white);
  --mm-color-text-dimmed: var(--color-yellow);
  --mm-color-background: var(--color-deep-purple);
  --mm-color-background-emphasis: var(--color-blue);

  /* --mm-color-background-highlight: rgba( 255,255,255, 0.08 );
  --mm-color-background-emphasis: rgba( 0,0,0, 0.1 );
  --mm-shadow: 0 0 20px rgba( 0,0,0, 0.5 ); */
}

.mm-panels a:hover {
  background-color: #CF0072;
  background-color: var(--color-hotpink);
  color: #FFF;
  color: var(--color-white);
}

.mm-menu_keyboardfocus a:focus,
.mm-menu_keyboardfocus.mm-menu_opened~.mm-wrapper__blocker a:focus {
  outline: 2px solid #FFF;
  outline: 2px solid var(--color-white);
  outline-offset: -4px;
  background: inherit;
}
