/* -------------------------------------------------------------------------- */
/*                               LAYOUT: GLOBAL WRAPS                         */
/* -------------------------------------------------------------------------- */

:root {
    --container-max-width: 1200px;
    --container-padding: 1rem;
}

/* Universal custom container */
.c-container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* Variants */
.c-container--wide {
  max-width: 1440px;
}

.c-container--narrow {
  max-width: 960px;
}


/* -------------------------------------------------------------------------- */
/*                                LAYOUT: HEADER                              */
/* -------------------------------------------------------------------------- */

.c-header {
  background-color: var(--color-white);

  ul.menu {
    li.menu-item {

      &.current-menu-item {
        text-decoration: underline;
        text-underline-offset: 0.4rem;
        a span {
          color: var(--black)!important;
        }
        
      }
        .menu-item-text, a {
            transition: var(--transition);

            &:hover {
              text-decoration: underline;
              text-underline-offset: 0.4rem;

              span {
                color: var(--black);
              }
              
            }
        }
    }

    ul.sub-menu {
      border: 0;
      box-shadow: none;
      width: 15vw;
      padding-top: 50px;

      li {
        a {
          padding: 20px 30px;
          background-color: #FAF9F8;
        }

        &:first-child a {
          border-radius: 12px 12px 0px 0px;
        }

        &:last-child a {
          border-radius: 0px 0px 12px 12px;
        }
      }
    }
  }
}

.uabb-creative-menu-mobile-toggle.hamburger .hamburger-menu rect, 
.uabb-creative-menu-mobile-toggle.hamburger-label .hamburger-menu rect {
  rx: 5px!important;
}


/* -------------------------------------------------------------------------- */
/*                                LAYOUT: FOOTER                              */
/* -------------------------------------------------------------------------- */

.c-footer {
  width: 100%;
  padding-block: 2rem;
  background-color: var(--primary, #222);
  color: var(--white, #fff);
}

.c-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
  font-size: var(--xs-font-size, 0.875rem);
}