/**
 * #Footer project
 */

.p-footer {
	color: var(--prolab-text, #f5f5f5);
	background-color: #000;
	background-image: url("/wp-content/themes/edance-parent/assets/img/megamenu-bg.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

	.p-footer__inner {
		display: flex;
		gap: 150px;
		align-items: flex-start;
		max-width: 1240px;
		margin: 0 auto;

		@media (max-width: 1024px) {
			flex-direction: column;
			gap: 40px;
			align-items: center;
			text-align: center;
		}
	}

	.p-footer__logo {
		display: block;
		width: 196px;

		img {
			width: 100%;
			height: auto;
		}
		@media (max-width: 768px) {
			margin: 0 auto;
		}
	}

	.p-footer__note {
		margin: 20px 0 0;
		font-size: 12px;
		line-height: 1.6;
	}

	.p-footer__nav {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 50px;
		flex: 1;

		@media (max-width: 768px) {
			grid-template-columns: 1fr;
			gap: 0;
			width: 100%;
			text-align: left;
		}
	}

	.p-footer__col {
		display: flex;
		flex-direction: column;
		gap: 28px;

		@media (max-width: 768px) {
			gap: 0;
			width: 100%;
		}
	}

	.p-footer__item {
		@media (max-width: 768px) {
			border-top: 1px solid var(--prolab-border, #2e2e2e);

			&:last-child {
				border-bottom: 1px solid var(--prolab-border, #2e2e2e);
			}
		}
	}

	.p-footer__col + .p-footer__col .p-footer__item:first-child {
		@media (max-width: 768px) {
			border-top: 0;
		}
	}

	.p-footer__row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		width: 100%;
		padding-top: 16px;
		border-top: 1px solid var(--prolab-border, #2e2e2e);
		color: inherit;
		text-decoration: none;
		background: none;

		img {
			margin-right: 6px;
			width: 16px;
			height: 16px;
		}
		@media (max-width: 768px) {
			padding: 16px 0;
			border-top: 0;
		}
	}

	.p-footer__head {
		display: flex;
		flex-direction: column;
		gap: 4px;
		color: inherit;
		text-decoration: none;
		text-align: left;
	}

	.p-footer__en {
		font-family: var(--ff-en);
		font-size: 20px;
		font-weight: 700;
		color: var(--nav-en, var(--color-accent));

		@media (max-width: 768px) {
			font-size: 24px;
		}
	}

	.p-footer__ja {
		font-size: 11px;
		font-weight: 500;
		color: #666;

		@media (max-width: 768px) {
			font-weight: 400;
			color: var(--prolab-text-muted, #a3a3a3);
		}
	}

	.p-footer__toggle {
		display: none;
		flex-shrink: 0;
		width: 28px;
		height: 28px;
		padding: 0;
		border: 1px solid var(--white);
		border-radius: 999px;
		background: transparent;
		cursor: pointer;

		@media (max-width: 768px) {
			display: grid;
			place-items: center;
		}
	}

	.p-footer__plus {
		position: relative;
		display: block;
		width: 12px;
		height: 12px;
		margin: 0 auto;

		&::before,
		&::after {
			content: "";
			position: absolute;
			left: 50%;
			top: 50%;
			background: var(--white);
			transform: translate(-50%, -50%);
		}

		&::before {
			width: 12px;
			height: 2px;
		}

		&::after {
			width: 2px;
			height: 12px;
			transition: transform 0.3s ease;
		}
	}

	.p-footer__item.is-open .p-footer__plus::after {
		transform: translate(-50%, -50%) scaleY(0);
	}

	.p-footer__sub {
		@media (min-width: 769px) {
			margin-top: 16px;
		}

		@media (max-width: 768px) {
			display: grid;
			grid-template-rows: 0fr;
			transition: grid-template-rows 0.35s ease;
		}
	}

	.p-footer__item.is-open .p-footer__sub {
		@media (max-width: 768px) {
			grid-template-rows: 1fr;
		}
	}

	.p-footer__links {
		display: flex;
		flex-direction: column;
		gap: 16px;
		margin: 0;
		padding: 0;
		list-style: none;

		@media (max-width: 768px) {
			overflow: hidden;
			min-height: 0;
			gap: 12px;
			padding-left: 8px;
			transition: padding-bottom 0.35s ease;
		}

		a {
			display: flex;
			align-items: center;
			gap: 8px;
			color: var(--prolab-text, #f5f5f5);
			font-size: 14px;
			text-decoration: none;

			span {
				color: var(--color-accent-strong, var(--prolab-ember, #e85d04));
				font-weight: 700;
			}

			@media (max-width: 768px) {
				font-size: 16px;

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

	.p-footer__item.is-open .p-footer__links {
		@media (max-width: 768px) {
			padding-bottom: 24px;
		}
	}

	.p-footer__strip {
		display: flex;
		align-items: center;
		justify-content: space-between;
		max-width: 1240px;
		margin: 80px auto 0;
		gap: 24px;

		@media (max-width: 768px) {
			flex-direction: column;
			margin-top: 40px;
		}
	}

	.p-footer__utils {
		display: flex;
		flex-wrap: wrap;
		gap: 12px 20px;
		margin: 0;
		padding: 0;
		list-style: none;

		a {
			display: inline-flex;
			align-items: center;
			gap: 4px;
			color: var(--prolab-text, #f5f5f5);
			font-size: 12px;
			text-decoration: none;
		}
		@media (max-width: 768px) {
			justify-content: center;
		}
	}

	.p-footer__copyright {
		margin: 0;
		font-size: 14px;
	}

	@media (prefers-reduced-motion: reduce) {
		.p-footer__sub,
		.p-footer__links,
		.p-footer__plus::after {
			transition: none;
		}
	}
}