/* =========  Design Tokens  ========= */
:root {
	/* Palette */
	--clr-primary: #184199;   /* Tailwind blue-600 */
	--clr-primary-dark: #1d4ed8; /* blue-700 */
	--clr-bg-light: #f9fafb; /* gray-50 */
	--clr-bg-dark: #1f2937;  /* gray-800 */
	--clr-text-dark: #111827;/* gray-900 */
	--clr-text-light: #f3f4f6;/* gray-100 */
	--clr-muted: #6b7280;    /* gray-500 */
  
	/* Typography */
	--font-sans: "Inter", "Noto Sans TC", system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", sans-serif;
	--radius-sm: .375rem;
	--radius-md: .75rem;
	--shadow-md: 0 4px 12px rgb(0 0 0 / 8%);
  }
  
  /* =========  Global Reset  ========= */
  *, *::before, *::after {
	box-sizing: border-box;
  }
  
  html,
  body {
	height: 100%;
	padding: 0;
	margin: 0;
	color: var(--clr-text-dark);
	background: var(--clr-bg-light);
	font-family: var(--font-sans);
	line-height: 1.75;
	scroll-behavior: smooth;
  }
  
  /* =========  Navigation  ========= */
  nav {
	display: flex;
	position: fixed;
	z-index: 1000;
	padding: .75rem 1rem;
	background: rgb(255 255 255 / 65%);
	inset: 0 0 auto; /* sticky top */
	backdrop-filter: blur(6px);
	box-shadow: 0 2px 6px rgb(0 0 0 / 7%);
	justify-content: center;
	gap: 1.25rem;
  }
  
  nav a {
	font-weight: 500;
	color: var(--clr-text-dark);
	text-decoration: none;
	transition: color .2s;
  }
  
  nav a:hover,
  nav a.active {
	color: var(--clr-primary);
  }
  
  /* =========  Header / Hero  ========= */
  header {
	display: grid;
	padding: 7rem 1rem 5rem; /* leave space for nav */
	color: var(--clr-text-light);
	text-align: center;
	background: linear-gradient(145deg, var(--clr-primary) 0%, var(--clr-primary-dark) 100%);
	place-items: center;
	gap: .5rem;
  }
  
  header h1 {
	margin: 0;
	font-size: clamp(2rem, 5vw, 3rem);
  }
  
  header p {
	margin: 0;
	font-size: 1.25rem;
	opacity: .9;
  }
  
  /* =========  Sections  ========= */
  section {
	max-width: 1000px; /* slight wider container */
	margin-inline: auto;
	padding: 4rem 1.25rem;
  }
  
  section h2 {
	color: var(--clr-primary-dark);
	text-align: center;
	font-size: 1.875rem;
	margin-bottom: 2.5rem;
  }
  
  /* =========  About  ========= */
  #about p {
	margin-block: 1rem;
	text-align: justify;
  }
  
  /* =========  Projects  ========= */
  #projects {
	padding-block: 4rem;
  }
  
  /* ---- Use grid, wider cards ---- */
  .carousel-container {
	display: grid;
  }
  
  #projects button { display: none; }
  
  .carousel {
	display: grid;
	gap: 2rem;
  }
  
  @media (width >= 640px) {
	.carousel {
	  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); /* wider min width */
	}
  }
  
  .carousel-item {
	display: flex;
	padding: 2rem; /* extra padding for roomy card */
	background: #fff;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	flex-direction: column;
	gap: 1rem;
	transition: transform .25s, box-shadow .25s;
  }
  
  .carousel-item:hover {
	transform: translateY(-4px);
	box-shadow: 0 6px 18px rgb(0 0 0  12%);
  }
  
  .carousel-item h3 {
	margin: 0;
	font-size: 1.25rem;
	color: var(--clr-primary-dark);
  }
  
  .carousel-item a {
	color: var(--clr-primary);
	font-weight: 500;
	overflow-wrap: break-word;
  }
  
  /* --- Bullet list hanging indent (凸排) --- */
  .carousel-item ul {
	margin: 0;
	padding-left: 1.25rem; /* keep bullet space */
	list-style-type: disc;
  }
  
  .carousel-item li {
	margin-bottom: .5rem;
	padding-left: .5rem;           /* indent text slightly */
	text-indent: -0.5rem;          /* create hanging indent (outdent bullet) */
  }
  
  /* =========  Contact  ========= */
  .contact-info {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	align-items: center;
  }
  
  /* =========  Social Buttons  ========= */
  .social-media-buttons {
	display: flex;
	justify-content: center;
	gap: 1rem;
	list-style: none;
	padding: 0;
	margin: 0;
  }
  
  .social-media-buttons li {
	display: grid;
	width: 2.75rem;
	height: 2.75rem;
	background: var(--clr-text-light);
	border: 1px solid var(--clr-primary);
	border-radius: var(--radius-sm);
	place-items: center;
	transition: background .3s, transform .3s;
  }
  
  .social-media-buttons li:hover {
	background: var(--clr-primary);
	transform: rotateY(360deg);
  }
  
  .social-media-buttons li svg {
	width: 1.5rem;
	height: 1.5rem;
	stroke: var(--clr-primary);
	transition: stroke .3s;
  }
  
  .social-media-buttons li:hover svg {
	stroke: var(--clr-text-light);
  }
  
  /* =========  Footer  ========= */
  footer {
	padding: 2rem 1rem;
	color: var(--clr-text-light);
	text-align: center;
	background: var(--clr-bg-dark);
	margin-top: 4rem;
  }
  
  /* =========  Back‑to‑Top Button  ========= */
  #button {
	display: grid;
	position: fixed;
	right: 2.5rem;
	bottom: 2.5rem;
	z-index: 1000;
	width: 3rem;
	height: 3rem;
	color: #fff;
	background: var(--clr-primary);
	border-radius: 50%;
	opacity: 0;
	visibility: hidden;
	place-items: center;
	font-size: 1.25rem;
	cursor: pointer;
	transition: opacity .3s, visibility .3s;
	box-shadow: 0 4px 10px rgb(0 0 0 / 15%);
  }
  
  #button.show {
	opacity: 1;
	visibility: visible;
  }
  
  #button:hover {
	background: var(--clr-primary-dark);
  }
  
  /* =========  Utilities  ========= */
  .text-center { text-align: center; }

  .flex-center { 	display: flex; 
					justify-content: center; 
					align-items: center; }
  
  /* =========  Anchor Style  ========= */
  a:any-link {
	color: var(--clr-primary);
	text-decoration: none;
  }
  
  a:hover { text-decoration: underline; }