/* -------------------------------------------------------------------------- */
/*                               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--base {
  max-width: 1280px;
  margin: 0 auto;
}


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


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

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

  ul.menu {
    li.menu-item {

      .menu-item-text,
      a {
        transition: var(--transition);
      }
    }

    /* Last item turned into a button, not visible in responsive */
    @media (min-width: 993px) {
      li.menu-item:last-child {
        border: #000000 solid 1.5px;
        border-radius: var(--border-radius-button);
        padding: 0.5rem 1rem;
        transition: var(--transition);
        color: var(--on-primary);

        &:hover {
          background-color: var(--primary);
          border-color: var(--primary);

          .menu-item-text {
            color: var(--on-primary);
          }

        }
      }
    }
  }
}


/* -------------------------------------------------------------------------- */
/*                                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);
}