@use "variables" as *;

// ---------------------------------------------------------------------------
// Footer (global)
//   Green band: brand block (logo + SNS) left, 4-column link nav right.
//   Black copyright bar below.
// ---------------------------------------------------------------------------
$footer-divider: rgba(#fff, 0.3);

.site-footer__main {
	background: rgba(#006933, 0.9);
	padding-block: rem(100);
	border-radius: rem(40) rem(40) 0 0; // rounded top corners

	@include sp {
		padding-block: rem(60);
	}
}

.site-footer__inner {
	display: flex;
	align-items: center;
	gap: rem(60);

	@include tab {
		align-items: flex-start; // tablet: logo aligns to top
	}

	@include sp {
		flex-direction: column;
		align-items: center;
		gap: rem(32);
	}
}

// --- brand (logo + SNS hotspots) ---
.footer-brand {
	position: relative;
	flex-shrink: 0;
	width: rem(200);
}

.footer-brand__logo {
	display: block;
	width: 100%;
	height: auto;
}

// transparent clickable areas over the baked-in SNS circles
.footer-brand__sns {
	position: absolute;
	bottom: 0;
	width: 20%;
	aspect-ratio: 1;
	border-radius: 50%;

	&--fb {
		left: 25%; // FB circle ~cx70/200
	}

	&--line {
		left: 55%; // LINE circle ~cx130/200
	}
}

// --- link nav (4 columns with dividers) ---
.footer-nav {
	flex: 1;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-right: 1px solid $footer-divider;

	@include tab {
		grid-template-columns: repeat(2, 1fr);
		row-gap: rem(28);
		border-right: none;
		width: 100%;
	}
}

.footer-nav__col {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: rem(30);
	padding: rem(30) rem(16);
	border-left: 1px solid $footer-divider;

	@include tab {
		// 2-col grid (<=1024): close the right edge of the even (right) column
		&:nth-child(even) {
			border-right: 1px solid $footer-divider;
		}
	}

	@include sp {
		gap: rem(20);
		padding-block: rem(20);
	}
}

.footer-nav__link {
	font-family: $font-serif;
	font-weight: 700;
	font-size: rem(14);
	line-height: 1.4;
	text-align: center;
	color: $color-white;
	transition: opacity 0.2s;

	&:hover {
		opacity: 0.7;
		text-decoration: none;
	}
}

// --- copyright bar ---
.site-footer__copy {
	background: rgba(#000, 0.9);
	padding-block: rem(20);
	text-align: center;

	// SP: leave room for the bottom-fixed contact bar (height rem(48)).
	@include sp {
		padding-bottom: rem(68); // 20 + 48 contact-tab bar
	}
}

.site-footer__copy-text {
	font-family: $font-serif;
	font-weight: 700;
	font-size: rem(11);
	color: $color-white;
	line-height: 1;
}