/*--- base ---*/

body {
	font-size: 1.125rem;
	color: var(--color-text);
}

@media (max-width: 62rem) {
	body {
		font-size: 1rem;
	}
}

*,
*::before,
*::after {
	margin: 0;
	padding: 0;
}

:root {
	--color-main: rgba(63, 29, 177, 1); /* #3f1db1 */
	--color-sub: rgba(3, 215, 244, 1); /* #03d7f4 */
	--color-accent: rgba(233, 51, 128, 1); /* #e93380 */
	--color-glow: rgba(255, 193, 83, 1); /* #ffc153 */
	--color-bg: rgba(10, 10, 50, 1); /* #0a0a32 */
	--color-gradient-1: linear-gradient(90deg, #03d7f4 0%, #007cff 50%, #3f1db1 100%);
	--color-gradient-2: linear-gradient(90deg, #e93380 0%, #3f1db1 50%, #007cff 100%);
	--color-gradient-3: linear-gradient(90deg, #ea86f4 0%, #007cff 50%, #3f1db1 100%);
	--color-white: rgba(255, 255, 255, 1); /* #ffffff */
	--color-lightGray: rgba(217, 217, 217, 1); /* #d9d9d9 */
	--color-text: rgba(20, 20, 20, 1); /* #141414 */
	--color-facebook: rgba(24, 119, 242, 1); /* #1877f2 */
	--color-line: rgba(0, 195, 0, 1); /* #00c300 */
	--color-youtube: rgba(255, 0, 0, 1); /* #ff0000 */
	--shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* override BS */
dl,
ol,
ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

section {
	padding: 6.25rem 0;
}

/* override BS */
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-weight: bold;
}

button {
	background: none;
	border: none;
	transition: all 0.3s ease;
}

a {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	transition: all 0.3s ease;
}

.indent {
	text-indent: 2em; /* 每個 em 約等於一個中文字寬度 */
}

.text-gradient {
	background: var(--color-gradient-1);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

/* --- image --- */

img {
	display: block;
	max-width: 100%;
	height: auto;
}

.-trademark-full {
	height: auto;
	aspect-ratio: 5 / 1;
}

.-trademark-m {
	height: auto;
	aspect-ratio: 1.1 / 1;
}

.-trademark-round {
	height: auto;
	aspect-ratio: 1 / 1;
}

/* --- button --- */

.text-button {
	position: relative;
	padding: 0.5rem 1.25rem;
	background-color: var(--color-main);
	color: var(--color-white);
	border-radius: 1rem;
	z-index: 0;
	overflow: hidden;
}

.text-button:hover {
	background-color: var(--color-accent);
	box-shadow: var(--shadow);
}

.text-button.-large {
	padding: 0.75rem 2rem;
	font-size: 1.25rem;
}

/* 按鈕懸停：邊框填色 */
.text-button.-fill:hover {
	background-color: var(--color-main);
}

.text-button.-fill::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 150%;
	background-color: var(--color-accent);
	border-radius: 0 0 50% 50%;
	z-index: -1;
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 0.5s ease;
}

.text-button.-fill:hover::before {
	transform: scaleY(1);
}

/* 按鈕懸停：漣漪擴散 */
.text-button.-ripple {
	border-radius: 3rem;
}

.text-button.-ripple::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 0;
	height: 0;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	transition: 0.6s ease;
}

.text-button.-ripple:hover::after {
	width: 10rem;
	height: 10rem;
}

/* 按鈕懸停：彩虹波浪 */
.text-button.-rainbow {
	background: var(--color-gradient-1);
}

.text-button.-rainbow:hover {
	background: linear-gradient(
		135deg,
		#03d7f4 0%,
		#007cff 15%,
		#3f1db1 30%,
		#e93380 45%,
		#ea86f4 60%,
		#03d7f4 75%,
		#007cff 90%,
		#3f1db1 100%
	);
	background-size: 500% 500%;
	animation: rainbowWave 5s ease infinite;
}

@keyframes rainbowWave {
	0%,
	100% {
		background-position: 0% 50%;
	}
	25% {
		background-position: 50% 0%;
	}
	50% {
		background-position: 100% 50%;
	}
	75% {
		background-position: 50% 100%;
	}
}

.icon-button > i.bi {
	font-size: 2rem;
	line-height: 1;
}

.icon-button {
	justify-content: center;
	align-items: center;
	width: 3.5rem;
	height: 3.5rem;
	background-color: var(--color-white);
	border: 1px solid var(--color-main);
	color: var(--color-main);
	border-radius: 50%;
	box-shadow: var(--shadow);
}

.icon-button:hover {
	background-color: var(--color-main);
	color: var(--color-white);
}

.icon-button.-facebook {
	color: var(--color-facebook);
	border: 1px solid var(--color-facebook);
}

.icon-button.-facebook:hover {
	color: var(--color-white);
	background-color: var(--color-facebook);
}

.icon-button.-line {
	color: var(--color-line);
	border: 1px solid var(--color-line);
}

.icon-button.-line:hover {
	color: var(--color-white);
	background-color: var(--color-line);
}

.icon-button.-youtube {
	color: var(--color-youtube);
	border: 1px solid var(--color-youtube);
}

.icon-button.-youtube:hover {
	color: var(--color-white);
	background-color: var(--color-youtube);
}

.icon-button.-is-visible {
	opacity: 1;
	pointer-events: auto;
}

/* ----- Common ----- */

.section-heading {
	margin-bottom: 1.75rem;
}

@media (max-width: 62rem) {
	.section-heading {
		margin-bottom: 3.125rem;
	}
}

.section-heading > :is(h1, h2, h3, h4, h5, h6) {
	margin-bottom: 1rem;
	color: var(--color-main);
	font-weight: bold;
}

.section-heading > .line-shape {
	width: 5rem;
	height: 0.125rem;
	background-color: var(--color-accent);
	margin: 0 auto;
}

/* ----- _Layout ----- */

/* --- nav --- */

.layout-nav {
	padding: 0.25rem 3rem;
	width: fit-content;
	margin: 0 auto;
	background-color: var(--color-white);
	border-radius: 1.5rem;
}

.layout-nav.-is-scrolled {
	box-shadow: var(--shadow);
}

/* override BS */
.layout-nav.fixed-top {
	top: 1rem;
}

.navbar-brand > .project-logo {
	margin-right: 2rem;
	width: 3rem;
}

/* override BS */
button.navbar-toggler {
	border: none;
}

.navbar-nav {
	gap: 1.5rem;
}

.layout-nav .nav-link {
	color: inherit;
	white-space: nowrap;
	transition: all 0.15s ease;
}

/* override BS*/
.navbar .nav-link:hover {
	color: var(--color-main);
}

/* override BS*/
@media (min-width: 576px) {
	.navbar-expand-sm .navbar-nav .nav-link {
		padding: 1rem;
	}
}

/* override BS*/
.navbar-nav .dropdown-menu {
	padding: 1rem 0;
	font-size: inherit;
	border-radius: 1rem;
}

.dropdown-menu > li + li {
	margin-top: 0.25rem;
}

.navbar .dropdown-menu img {
	max-width: none;
}

.navbar-nav .dropdown-menu .project-logo {
	display: inline-block;
	margin-right: 1rem;
	width: 2rem;
}

.navbar-nav .dropdown-menu .dropdown-item {
	filter: grayscale(1);
}

.navbar-nav .dropdown-menu .dropdown-item:hover {
	filter: grayscale(0);
}

/* --- social media & go top buttons --- */

.SNS-buttons,
.go-top {
	position: fixed;
	bottom: 2rem;
	margin: 0 2rem;
}

.SNS-buttons {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.go-top {
	right: 0;
	opacity: 0;
	pointer-events: none;
}

/* --- footer --- */

.layout-footer {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: var(--color-bg);
	font-size: 1rem;
	color: var(--color-white);
}

.footer-content {
	display: flex;
	align-items: center;
	margin: 3.75rem 0;
}

.footer-content > .company-logo {
	width: 6rem;
}

.contact-menu {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-left: 3rem;
}

.contact-menu .menu-item:first-of-type {
	font-size: 1.125rem;
	margin-bottom: 0.375rem;
}

.contact-menu .menu-link {
	color: var(--color-lightGray);
}

.contact-menu .menu-link:hover {
	color: var(--color-white);
}