/**
 * Custom Styles for Minh Thúy Mio Theme
 */

/* Remixicon fix */
:where([class^="ri-"])::before {
    content: "\f3c2";
}

.gradient-bg {
    background: linear-gradient(135deg, #1E3A8A 0%, #3B82F6 50%, #00B04F 100%);
}

.floating-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.hero-overlay {
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.9) 0%, rgba(59, 130, 246, 0.8) 50%, rgba(0, 176, 79, 0.9) 100%);
}

.manulife-gradient {
    background: linear-gradient(135deg, #1E3A8A 0%, #3B82F6 50%, #00B04F 100%);
}

/* Fix menu display */
header nav ul,
header nav ul.menu,
.mobile-menu ul,
.mobile-menu ul.menu {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}

header nav ul li,
.mobile-menu ul li {
    list-style: none !important;
    margin: 0 !important;
    display: list-item !important;
}

header nav ul li a,
.mobile-menu ul li a {
    display: block !important;
    text-decoration: none !important;
}

/* Desktop menu spacing */
header nav ul.flex.items-center.space-x-8 li {
    margin-right: 2rem !important;
}

header nav ul.flex.items-center.space-x-8 li:last-child {
    margin-right: 0 !important;
}

/* Mobile menu */
.mobile-menu ul {
    flex-direction: column !important;
    align-items: stretch !important;
}

.mobile-menu ul li {
    margin-bottom: 0.5rem !important;
}

/* Menu Active State */
header nav ul li a.active,
.mobile-menu ul li a.active {
    color: #00B04F !important;
    font-weight: 600 !important;
}

header nav ul li a:hover,
.mobile-menu ul li a:hover {
    color: #00B04F !important;
}

/* Slider styles */
.hero-slide {
    transition: opacity 0.6s ease-in-out;
}

.hero-slide:not(.active) {
    opacity: 0 !important;
    display: none !important;
}

.hero-slide.active {
    opacity: 1 !important;
    display: block !important;
}

/* Table of Contents */
.table-of-contents {
    position: sticky;
    top: 120px;
}

/* Page content headings with IDs */
.prose h2[id],
.prose h3[id] {
    scroll-margin-top: 120px;
}