@charset "UTF-8";
@import "reset.css";
@import "layout.css";
@import "gallery.css";

:root {
	--clr-primary-blue: 216 61% 18%;
	--clr-primary-yellow: 44 89% 53%;
	--clr-primary-lightblue: 214 47% 93%;
	--clr-primary-paleblue: 204 83% 98%;

	--clr-sub-blue: 216 52% 21%;

	--clr-light-blue: 216 40% 94%;

	--clr-black: 0 0% 8%;
	--clr-lightblack: 0 0% 24%;
	--clr-grey: 0 0% 40%;
	--clr-lightgrey: 0 0% 92%;
	--clr-white: 0 0% 98%;

	/* font-sizes */
	--fs-900: clamp(3rem, 5vw + 1rem, 5rem);
	--fs-800: 2.5rem;
	--fs-700: 1.2rem;
	--fs-600: 1rem;
	--fs-500: 0.9rem;
	--fs-400: 0.875rem;
	--fs-300: 0.8rem;
	--fs-200: 0.75rem;
	--fs-100: 0.7rem;

	--nav-height: 88px;
	--logo-width: 180px;
	--footer-height: 255px;
}

html {
	scroll-behavior: smooth;
	/* height: 100%; */
}
html,
body {
	/* height: 100%; */
	overflow-x: hidden;
}

body {
	font-family: "Lato", "Noto Sans TC", sans-serif;
	scroll-behavior: smooth;
	letter-spacing: 1.3px;
	color: hsl(var(--clr-primary-blue));
	color: hsl(216, 61%, 33%);
}
main {
	padding-top: var(--nav-height);
	transition: padding-top 0.4s ease;
}

.nav-up main {
	padding-top: 0;
}

/* Hidden class */
.need-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Fade in when scroll to their section */
:where(.from-bottom, .from-left, .from-right, .from-little-bottom) {
	transition: opacity 1s cubic-bezier(0, 0.24, 0.24, 1),
		transform 1s cubic-bezier(0, 0.24, 0.24, 1);
}

.invisible {
	opacity: 0;
	visibility: hidden;
}

.invisible.from-bottom {
	transform: translateY(3rem);
}

.invisible.from-left {
	transform: translateX(-3rem);
}

.invisible.from-right {
	transform: translateX(3rem);
}

.invisible.from-little-bottom {
	transform: translateY(1.5rem);
}

/* Header Design */
.header {
	position: fixed;
	width: 100%;
	z-index: 99;
	box-shadow: 0 5px 10px hsl(var(--clr-grey) / 0.24);
	transition: all 0.4s ease;
}
.nav-up .header {
	transform: translateY(-100%);
}

.navbar {
	background-color: hsl(var(--clr-primary-blue));
}

.navbar > div {
	height: var(--nav-height);
}

.logo {
	width: var(--logo-width);
	padding: 1rem 0 1rem 1rem;
}

.logo-text {
	transition: 0.4s;
}

.logo:hover .logo-text {
	transform: translateX(0.24rem);
}

/* Mobile Navigation */
@media (max-width: 768px) {
	.logo a {
		justify-content: flex-start;
		margin-left: -1.5rem;
	}
	.navMenu {
		position: fixed;
		top: var(--nav-height);
		left: 0;
		width: 100%;
		background-color: hsl(var(--clr-primary-blue));
		padding: 1rem 0;
		transform: translateY(-100%);
		opacity: 0;
		visibility: hidden;
		transition: all 0.3s ease;
		z-index: -1;
	}

	.navMenu.active {
		transform: translateY(0);
		opacity: 1;
		visibility: visible;
	}

	.navMenu ul {
		flex-direction: column;
	}
	.navMenu li {
		padding: 0.5rem 0;
		opacity: 0;
		transform: translateY(-20px);
	}
	@keyframes navMenuFade {
		from {
			opacity: 0;
			transform: translateY(-20px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
}
.navMenu li {
	width: 100%;
	text-align: center;
}

.navMenu a {
	font-weight: 300;
	color: hsl(var(--clr-white));
	padding-bottom: 0.5rem;
	position: relative;
	transition: 0.5s;
}

.navMenu a:focus,
.navMenu a.active,
.navMenu a:hover {
	font-weight: 500;
	letter-spacing: 1.8px;
}
.navMenu a::after {
	position: absolute;
	content: "";
	width: 100%;
	height: 2.4px;
	border-radius: 1.2px;
	background-color: hsl(var(--clr-white));
	left: 0;
	bottom: 0;
	transform: scaleX(0%);
	transform-origin: right;
	transition: transform 0.5s ease-out;
}
.navMenu a:hover::after,
.navMenu a.active::after {
	transform: scaleX(100%);
	transform-origin: left;
}

.dropdown-icon {
	position: relative;
	color: hsl(var(--clr-white));
	font-size: 0.8rem;
	left: 5px;
	top: -2px;
}
.dropdown-icon i {
	transition: transform 0.5s;
}

li.has-dropdown:nth-of-type(1) {
	z-index: 3;
}
li.has-dropdown:nth-of-type(2) {
	z-index: 2;
}

.has-dropdown {
	cursor: pointer;
}
.dropdown-icon {
	cursor: pointer;
}
@media (max-width: 768px) {
	.has-dropdown ul {
		width: 100%;
		background-color: hsl(var(--clr-primary-blue));
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.5s ease-out, opacity 0.5s ease-out;
		opacity: 0;
	}

	.has-dropdown li {
		padding: 0.5rem 0;
		width: inherit;
		background-color: hsl(var(--clr-sub-blue));
		transform: translateY(-24px);
		transition: transform 0.3s ease-out, opacity 0.3s ease-out;
		opacity: 0;
	}

	.has-dropdown.active .dropdown-icon i {
		transform: rotate(180deg);
	}

	.has-dropdown.active ul {
		max-height: 800px; /* 設置一個足夠大的值 */
		opacity: 1;
		margin-top: 0.5rem;
	}

	.has-dropdown.active li {
		transform: translateY(0);
		opacity: 1;
	}
}

/* Hamburger menu */
.hamburger {
	display: block;
	background-color: transparent;
	border: none;
	position: absolute;
	top: 50%;
	right: 15px;
	transform: translateY(-50%);
	z-index: 10;
	width: 25px;
	height: 20px;
	cursor: pointer;
}
.hamburger span {
	display: none;
}

.hamburger > .hambuger-container {
	display: block;
	z-index: 10;
	width: 25px;
	height: 20px;
	cursor: pointer;
}
.hamburger > .hambuger-container > .hamburger_line {
	display: block;
	border-radius: 1.85px;
	width: 25px;
	height: 4px;
	background: hsl(var(--clr-white));
}
.hamburger .hamburger_line.line1 {
	position: absolute;
	left: 0;
	top: 0;
	transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1),
		transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.hamburger .hamburger_line.line2 {
	position: absolute;
	left: 0;
	top: 8px;
	transition: opacity 0.3s, visibility 0.3s;
	/* transform: translateY(8px); */
}
.hamburger .hamburger_line.line3 {
	position: absolute;
	left: 0;
	bottom: 0;
	transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1),
		transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
/* Burger Animation Design */
.cross .hamburger .hamburger_line.line2 {
	opacity: 0;
	visibility: hidden;
}
.cross .hamburger .hamburger_line.line3 {
	bottom: 8px;
	transform: rotate(45deg) translateZ(0);
	transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1),
		transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.cross .hamburger .hamburger_line.line1 {
	top: 8px;
	transform: rotate(-45deg) translateZ(0);
	transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1),
		transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

/* Footer */
footer {
	height: auto;
	background-color: hsl(var(--clr-primary-blue));
	color: hsl(var(--clr-white));
	height: var(--footer-height);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.contact {
	flex-direction: column;
	height: auto;
}

.clinic {
	width: 88%;
	margin-bottom: 1rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
}

.clinic-2 {
	padding-left: 0;
}

.clinic-name {
	width: 33.33%; /* 佔三分之一 */
	text-align: left;
	padding-right: 1rem;
	box-sizing: border-box;
}
.clinic-content {
	width: 66.67%; /* 佔剩餘的三分之二 */
	text-align: left;
}

.clinic-content ul {
	padding-left: 0;
}

.clinic-content li {
	text-align: left;
	list-style-type: none;
}

.clinic-content a {
	color: hsl(var(--clr-white));
	font-weight: 100;
}

.clinic-content a span {
	font-weight: 600;
}

.clinic-content li:last-child {
	padding-top: 0.4rem;
}

.clinic-content li:hover a {
	border-bottom: solid 1.5px hsl(var(--clr-white));
}

.contact .line {
	display: block;
	width: 88%;
	height: 2px;
	background-color: hsl(var(--clr-primary-yellow));
	margin: 1rem auto;
}

.clinic-content li:hover a {
	border-bottom: solid 1.5px hsl(var(--clr-white));
}

/* Style Index Banner */
.banner-container {
	width: 100%;
	min-height: calc(100vh - var(--nav-height) - var(--footer-height));
	padding: 2rem 0;
	display: grid;
	place-items: center;
}
.banner-container img {
	--img-heght: 450px;
	width: min(81vw, 1280px);
	max-height: var(--img-heght);
	object-fit: cover;
	object-position: 50% 38%;
}

/* Basic Button Design */
.home-btn-container {
	align-self: flex-start;
}
.home-btn-container .btn {
	width: 100%;
	margin: 0 auto;
}
.home-btn-container button {
	background-color: transparent;
	border: none;
}
.home-btn-container button a {
	padding: 0.8rem calc(2rem + 2vw);
	display: block;
	border-radius: 1.5rem;
	border: solid 2px hsl(var(--clr-primary-blue));
	word-spacing: 0.24em;
	font-size: calc(0.75rem + 0.7vw);
	font-weight: 800;
	letter-spacing: 1.45px;
	color: hsl(var(--clr-primary-blue));
	transition: 0.4s linear;
}
.home-btn-container button a:hover {
	background-color: hsl(var(--clr-primary-blue));
	color: hsl(var(--clr-white));
	letter-spacing: 0.08em;
}