@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&family=Noto+Sans+SC:wght@400;500;700;900&family=Open+Sans:wght@400;600&display=swap');

body {
    font-family: 'Noto Sans SC', 'Open Sans', 'Montserrat', sans-serif;
    scroll-behavior: smooth;
    background-color: #111827; /* bg-gray-900 */
}

.patterned-section-bg {
    background-image: url('https://www.bjaxiscloud.com.cn/web/images/common/bjzzx-bg.png');
    background-repeat: repeat;
    background-color: rgba(17, 24, 39, 0.8); /* Darker background for dark mode, similar to Tailwind gray-900 with transparency */
}


.text-cultural-red {
    color: #A53131; 
}
.bg-cultural-red {
    background-color: #A53131;
}
.hover\\:bg-red-700:hover {
    background-color: #8D1B1B; 
}
.border-cultural-red {
    border-color: #A53131;
}
.focus\\:ring-cultural-red:focus {
    --tw-ring-color: #A53131;
}
.focus\\:border-cultural-red:focus {
    border-color: #A53131;
}
input[type="checkbox"]:checked.text-cultural-red,
input[type="radio"]:checked.text-cultural-red {
    background-color: #A53131;
    border-color: #A53131;
}


.text-imperial-gold {
    color: #F9A825; 
}
.bg-imperial-gold {
    background-color: #F9A825;
}
.hover\\:bg-yellow-600:hover {
    background-color: #D48C1A; 
}
.border-imperial-gold {
    border-color: #F9A825;
}

/* Blue Accent Colors (using Tailwind's palette names for reference) */
.text-accent-blue {
    color: #0ea5e9; /* sky-500 */
}
.hover\\:text-accent-blue-hover:hover {
    color: #38bdf8; /* sky-400 */
}
.bg-accent-blue {
    background-color: #0ea5e9; /* sky-500 */
}
.hover\\:bg-accent-blue-hover:hover {
    background-color: #0284c7; /* sky-600 */
}
.border-accent-blue {
    border-color: #0ea5e9; /* sky-500 */
}
.focus\\:ring-accent-blue:focus {
    --tw-ring-color: #0ea5e9; /* sky-500 */
}
.focus\\:border-accent-blue:focus {
    border-color: #0ea5e9; /* sky-500 */
}


#main-header {
    background-color: transparent;
}

#main-header.scrolled {
    background-color: rgba(17, 24, 39, 0.9); 
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

#hero-video {
    object-fit: cover;
    background-size: cover;
    background-position: center;
}


.hero-title, .hero-subtitle, #hero-banner a {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease-out forwards;
}

.hero-title { animation-delay: 0.2s; }
.hero-subtitle { animation-delay: 0.4s; }
#hero-banner a:nth-child(1) { animation-delay: 0.6s; }
#hero-banner a:nth-child(2) { animation-delay: 0.7s; }


@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.section-title, .section-subtitle {
    opacity: 0;
    transform: translateY(20px);
}


.hover-lift {
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}
.hover-lift:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.2), 0 10px 10px -5px rgba(0,0,0,0.1);
}

.hover-pop {
    transition: transform 0.3s ease-out;
}
.hover-pop:hover {
    transform: scale(1.05);
}

.hover-bg-highlight:hover {
    background-color: rgba(249, 168, 37, 0.1); 
}


i[data-lucide] {
    display: inline-block; 
    vertical-align: middle;
}


@media (max-width: 768px) { /* md breakpoint in Tailwind */
    #main-nav-links {
        /* Tailwind classes 'hidden md:flex' will handle initial state */
        /* When visible (class 'hidden' removed by JS): */
        display: none; /* Initially hidden, JS will toggle to flex */
        flex-direction: column;
        align-items: flex-start; /* Or center if preferred */
        width: 100%;
        position: absolute;
        top: 100%; /* Position below header */
        left: 0;
        background-color: rgba(17, 24, 39, 0.95); /* Same as scrolled header or slightly darker */
        padding: 1rem 1.5rem; /* px-6 from container */
        gap: 0.75rem; /* space-y-3 */
    }
    #main-nav-links.mobile-menu-open {
        display: flex;
    }
}

/* Original .prose-invert styles for dark backgrounds */
.prose-invert h1, .prose-invert h2, .prose-invert h3, .prose-invert h4, .prose-invert strong {
  color: inherit; 
}
.prose-invert blockquote {
  border-left-color: #4b5563; 
  color: #d1d5db;
}
.prose-invert a {
  color: #F9A825; 
}
.prose-invert a:hover {
  color: #A53131;
}

/* Styles for .prose within .patterned-section-bg (light background) */
.patterned-section-bg .prose a {
    color: #F9A825; /* imperial-gold, consistent with former .prose-invert links */
}
.patterned-section-bg .prose a:hover {
    color: #A53131; /* cultural-red, consistent with former .prose-invert links hover */
}
/* Tailwind's default .prose class handles other elements like h1-h4, strong, blockquote, p for light backgrounds.
   The base text color for .prose is typically set by a class like text-gray-700 on the .prose div itself in HTML. */


.form-radio {
  appearance: none;
  padding: 0;
  print-color-adjust: exact;
  display: inline-block;
  vertical-align: middle;
  background-origin: border-box;
  user-select: none;
  flex-shrink: 0;
  height: 1rem;
  width: 1rem;
  color: #A53131; 
  background-color: #374151; 
  border-color: #4B5563; 
  border-width: 1px;
  border-radius: 100%;
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.form-radio:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-width: 2px;
  --tw-ring-color: #A53131; 
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.form-radio:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.form-checkbox {
  appearance: none;
  padding: 0;
  print-color-adjust: exact;
  display: inline-block;
  vertical-align: middle;
  background-origin: border-box;
  user-select: none;
  flex-shrink: 0;
  height: 1rem;
  width: 1rem;
  color: #A53131; 
  background-color: #374151; 
  border-color: #4B5563; 
  border-width: 1px;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.form-checkbox:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-width: 2px;
  --tw-ring-color: #A53131; 
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.form-checkbox:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}