@charset "utf-8";

/* --------------------------------------------------------------------------
   Footer
-------------------------------------------------------------------------- */

	body > footer {

		box-sizing: border-box;
		padding: 0 var(--space-56) var(--space-56);
		background: var(--color-neutral-white);

		> div {

			display: flex;
			height: 28rem;
			flex-direction: column;
			box-sizing: border-box;
			padding: 2.625rem;
			background: var(--color-brand-surface-lowest);
			border-radius: var(--radius-600);

			> header {

				display: flex;
				align-items: flex-start;
				justify-content: space-between;

				> div {

					display: flex;
					align-items: flex-start;
					gap: var(--space-16);

					a {

						display: flex;
						height: 3.5rem;
						align-items: center;
						justify-content: center;
						box-sizing: border-box;
						padding: .875rem var(--space-16);
						color: var(--color-brand-content-medium);
						background: var(--color-neutral-white);
						border-radius: var(--radius-400);
						text-decoration: none;

						&:first-child {

							gap: .7025rem;

							img {
								width: 1.5330625rem;
								height: 1.49625rem;
							}

						}

						&:last-child {

							img {
								width: 13.3125rem;
								height: 1.75rem;
							}

						}

					}

					img {
						display: block;
						flex: 0 0 auto;
						object-fit: contain;
					}

					span {
						color: var(--color-brand-registry);
						font-size: 1.0536875rem;
						font-weight: var(--font-weight-regular);
						line-height: 1.75rem;
						white-space: nowrap;
					}

				}

				> nav {
					display: flex;
					align-items: center;
					gap: var(--space-16);
				}

			}

			> nav {

				display: grid;
				grid-template-columns: repeat(4, 17.5rem);
				gap: var(--space-24);
				margin-top: var(--space-80);

				> div {

					display: flex;
					flex-direction: column;
					align-items: flex-start;
					gap: var(--space-12);

					strong {
						margin-bottom: var(--space-4);
						color: var(--color-brand-content-high);
						font-size: var(--font-size-body-m);
						font-weight: var(--font-weight-regular);
						line-height: var(--line-height-body-m);
					}

					a {

						color: var(--color-neutral-tertiary);
						font-size: var(--font-size-body-m);
						line-height: var(--line-height-body-m);
						text-decoration: none;
						transition: color var(--transition-default);

						&:hover, &.selected {
							color: var(--color-brand-primary);
						}

					}

				}

			}

			> div:last-child {

				display: flex;
				min-height: 7.25rem;
				align-items: flex-end;
				justify-content: space-between;
				margin-top: auto;

				small {
					color: var(--color-neutral-content-medium-low);
					font-size: var(--font-size-body-s);
					line-height: var(--line-height-body-s);
					opacity: .86;
				}

				nav {

					display: flex;
					align-items: center;
					gap: var(--space-16);

					a {

						color: var(--color-neutral-tertiary);
						font-size: var(--font-size-body-m);
						line-height: var(--line-height-body-m);
						text-decoration: none;
						transition: color var(--transition-default);

						&:hover {
							color: var(--color-brand-primary);
						}

					}

				}

			}

		}

	}