/* Google Fonts Import */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap");

/* CSS Custom Properties (Variables) */
:root {
  /* Colors */
  --color-white: #ffffff;
  --color-black: #000000;

  /* Blue Palette */
  --color-blue-900: #002647;
  --color-blue-400: #42bdf;
  --color-blue-200: #c2eaff;

  /* Yellow Palette */
  --color-yellow-300: #fcc15a;
  --color-yellow-200: #fce0a5;
  --color-yellow-50: #fffaf0;

  /* Red Palette */
  --color-red-600: #dc2828;

  /* Orange Palette */
  --color-green-500: #f77f00; /* Note: This appears to be orange despite the "Green500" label */

  /* Cream Palette */
  --color-cream-200: #eae267;

  /* Spacing Scale */
  --spacing-0: 0px;
  --spacing-100: 8px;
  --spacing-200: 16px;
  --spacing-300: 24px;
  --spacing-400: 32px;
  --spacing-500: 40px;
  --spacing-600: 48px;

  /* Typography */
  --font-family-primary: "Noto Sans SC", "Noto Sans Simplified Chinese",
    sans-serif;

  /* Font Sizes */
  --font-size-xs: 10px;
  --font-size-sm: 12px;
  --font-size-base: 16px;
  --font-size-lg: 20px;
  --font-size-xl: 48px;

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line Heights */
  --line-height-normal: 1.25; /* 125% */

  /* Letter Spacing */
  --letter-spacing-normal: 0px;
}

/* Base Reset and Typography */
body {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
  color: var(--color-black);
  background-color: var(--color-white);
}

/* Typography Presets */
.text-preset-1-bold {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
}

.text-preset-1-light {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
}

.text-preset-2-bold {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
}

.text-preset-2-light {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
}

.text-preset-3-semibold {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
}

.text-preset-3-light {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
}

.text-preset-4-semibold {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
}

.text-preset-4-light {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
}

.text-preset-5 {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
}

/* Utility Classes for Colors */
.color-white {
  color: var(--color-white);
}
.color-black {
  color: var(--color-black);
}
.color-blue-900 {
  color: var(--color-blue-900);
}
.color-blue-400 {
  color: var(--color-blue-400);
}
.color-blue-200 {
  color: var(--color-blue-200);
}
.color-yellow-300 {
  color: var(--color-yellow-300);
}
.color-yellow-200 {
  color: var(--color-yellow-200);
}
.color-yellow-50 {
  color: var(--color-yellow-50);
}
.color-red-600 {
  color: var(--color-red-600);
}
.color-green-500 {
  color: var(--color-green-500);
}
.color-cream-200 {
  color: var(--color-cream-200);
}

/* Background Color Utilities */
.bg-white {
  background-color: var(--color-white);
}
.bg-black {
  background-color: var(--color-black);
}
.bg-blue-900 {
  background-color: var(--color-blue-900);
}
.bg-blue-400 {
  background-color: var(--color-blue-400);
}
.bg-blue-200 {
  background-color: var(--color-blue-200);
}
.bg-yellow-300 {
  background-color: var(--color-yellow-300);
}
.bg-yellow-200 {
  background-color: var(--color-yellow-200);
}
.bg-yellow-50 {
  background-color: var(--color-yellow-50);
}
.bg-red-600 {
  background-color: var(--color-red-600);
}
.bg-green-500 {
  background-color: var(--color-green-500);
}
.bg-cream-200 {
  background-color: var(--color-cream-200);
}

/* Spacing Utilities */
.m-0 {
  margin: var(--spacing-0);
}
.m-100 {
  margin: var(--spacing-100);
}
.m-200 {
  margin: var(--spacing-200);
}
.m-300 {
  margin: var(--spacing-300);
}
.m-400 {
  margin: var(--spacing-400);
}
.m-500 {
  margin: var(--spacing-500);
}
.m-600 {
  margin: var(--spacing-600);
}

.p-0 {
  padding: var(--spacing-0);
}
.p-100 {
  padding: var(--spacing-100);
}
.p-200 {
  padding: var(--spacing-200);
}
.p-300 {
  padding: var(--spacing-300);
}
.p-400 {
  padding: var(--spacing-400);
}
.p-500 {
  padding: var(--spacing-500);
}
.p-600 {
  padding: var(--spacing-600);
}

/* Margin Top/Bottom/Left/Right */
.mt-0 {
  margin-top: var(--spacing-0);
}
.mt-100 {
  margin-top: var(--spacing-100);
}
.mt-200 {
  margin-top: var(--spacing-200);
}
.mt-300 {
  margin-top: var(--spacing-300);
}
.mt-400 {
  margin-top: var(--spacing-400);
}
.mt-500 {
  margin-top: var(--spacing-500);
}
.mt-600 {
  margin-top: var(--spacing-600);
}

.mb-0 {
  margin-bottom: var(--spacing-0);
}
.mb-100 {
  margin-bottom: var(--spacing-100);
}
.mb-200 {
  margin-bottom: var(--spacing-200);
}
.mb-300 {
  margin-bottom: var(--spacing-300);
}
.mb-400 {
  margin-bottom: var(--spacing-400);
}
.mb-500 {
  margin-bottom: var(--spacing-500);
}
.mb-600 {
  margin-bottom: var(--spacing-600);
}

.ml-0 {
  margin-left: var(--spacing-0);
}
.ml-100 {
  margin-left: var(--spacing-100);
}
.ml-200 {
  margin-left: var(--spacing-200);
}
.ml-300 {
  margin-left: var(--spacing-300);
}
.ml-400 {
  margin-left: var(--spacing-400);
}
.ml-500 {
  margin-left: var(--spacing-500);
}
.ml-600 {
  margin-left: var(--spacing-600);
}

.mr-0 {
  margin-right: var(--spacing-0);
}
.mr-100 {
  margin-right: var(--spacing-100);
}
.mr-200 {
  margin-right: var(--spacing-200);
}
.mr-300 {
  margin-right: var(--spacing-300);
}
.mr-400 {
  margin-right: var(--spacing-400);
}
.mr-500 {
  margin-right: var(--spacing-500);
}
.mr-600 {
  margin-right: var(--spacing-600);
}

/* Padding Top/Bottom/Left/Right */
.pt-0 {
  padding-top: var(--spacing-0);
}
.pt-100 {
  padding-top: var(--spacing-100);
}
.pt-200 {
  padding-top: var(--spacing-200);
}
.pt-300 {
  padding-top: var(--spacing-300);
}
.pt-400 {
  padding-top: var(--spacing-400);
}
.pt-500 {
  padding-top: var(--spacing-500);
}
.pt-600 {
  padding-top: var(--spacing-600);
}

.pb-0 {
  padding-bottom: var(--spacing-0);
}
.pb-100 {
  padding-bottom: var(--spacing-100);
}
.pb-200 {
  padding-bottom: var(--spacing-200);
}
.pb-300 {
  padding-bottom: var(--spacing-300);
}
.pb-400 {
  padding-bottom: var(--spacing-400);
}
.pb-500 {
  padding-bottom: var(--spacing-500);
}
.pb-600 {
  padding-bottom: var(--spacing-600);
}

.pl-0 {
  padding-left: var(--spacing-0);
}
.pl-100 {
  padding-left: var(--spacing-100);
}
.pl-200 {
  padding-left: var(--spacing-200);
}
.pl-300 {
  padding-left: var(--spacing-300);
}
.pl-400 {
  padding-left: var(--spacing-400);
}
.pl-500 {
  padding-left: var(--spacing-500);
}
.pl-600 {
  padding-left: var(--spacing-600);
}

.pr-0 {
  padding-right: var(--spacing-0);
}
.pr-100 {
  padding-right: var(--spacing-100);
}
.pr-200 {
  padding-right: var(--spacing-200);
}
.pr-300 {
  padding-right: var(--spacing-300);
}
.pr-400 {
  padding-right: var(--spacing-400);
}
.pr-500 {
  padding-right: var(--spacing-500);
}
.pr-600 {
  padding-right: var(--spacing-600);
}

/* Language switcher hover functionality - target only the language switcher container */
/* Target the inner relative div that contains both button and menu */
/* .absolute.inset-y-0.right-0 .relative:hover #language-menu,
#language-button:hover + #language-menu,
#language-menu:hover {
  display: block !important;
} */

/* Create an invisible bridge to cover the gap between button and menu */
#language-button {
  position: relative;
}

#language-button::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 10px; /* Covers the mt-2 gap (8px) with extra buffer */
  background: transparent;
  pointer-events: none; /* Don't interfere with other elements */
}

/* Extend the hover zone of the parent container to include the gap */
.absolute.inset-y-0.right-0 .relative {
  padding-bottom: 10px; /* Add invisible padding to extend hover area */
}

/* Footer */
@media (width <= 926px) {
  .footer-bottom {
    flex-direction: column;
    align-items: center;
    gap: 4rem;
  }

  body > footer > div > div.footer-bottom > img {
    width: fit-content;
  }
}

@media (width <= 588px) {
  body > footer > div > div.footer-top > h2 {
    font-size: 30px;
  }
}

@media (width <= 561px) {
  .blue-overlay {
    height: fit-content;
  }

  .footer-bottom {
    margin-top: 2rem;
  }

  .footer-links-container {
    flex-direction: column;
    width: 100%;
  }
}

body
  > footer
  > div
  > div.footer-bottom.flex.justify-between
  > div
  > div
  > ul
  > li:not(:first-child) {
  opacity: 0.5;
  transition: opacity 0.3s ease-in-out;
}

body
  > footer
  > div
  > div.footer-bottom.flex.justify-between
  > div
  > div
  > ul
  > li:not(:first-child):hover {
  opacity: 1;
}