/* Alpine Cloak Utility */
[x-cloak] {
    display: none !important;
}

/* Hero and Section Animations */
@keyframes custom-bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

.anim-shape-1 {
    animation: custom-bounce 4s ease-in-out infinite;
}

.anim-shape-2 {
    animation: custom-bounce 5s ease-in-out infinite reverse;
}

.anim-shape-3 {
    animation: custom-bounce 6s ease-in-out infinite 1s;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-12px);
    }
}

@keyframes float-delayed {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-12px);
    }
}

@keyframes pulse-glow {

    0%,
    100% {
        opacity: 0.2;
        transform: scale(1);
    }

    50% {
        opacity: 0.4;
        transform: scale(1.1);
    }
}

@keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

.animate-float-delayed {
    animation: float-delayed 6s ease-in-out infinite;
    animation-delay: 3s;
}

.animate-pulse-glow {
    animation: pulse-glow 4s ease-in-out infinite;
}

.hover-shimmer:hover .shimmer-effect {
    animation: shimmer 1.5s infinite;
}

/* SVG Card Circular Radial Spotlight Gradient (White in middle, circular fadeout) */
.svg-radial-spotlight {
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.6) 24%, rgba(255, 255, 255, 0.15) 48%, rgba(255, 255, 255, 0) 70%);
}

/* Blog Pros & Cons List Styling (Resilient & ContentEditable Safe) */
.pros-list,
.prose .pros-list,
.note-editable .pros-list {
    list-style-type: disc !important;
    margin: 0 0 0 1.25rem !important;
    padding: 0 !important;
}

.pros-list li,
.prose .pros-list li,
.note-editable .pros-list li {
    display: list-item !important;
    color: #e5e7eb !important;
    margin-bottom: 6px !important;
    padding-left: 4px !important;
    line-height: 1.6 !important;
}

.pros-list li::marker,
.prose .pros-list li::marker,
.note-editable .pros-list li::marker {
    color: #34d399 !important;
    font-size: 1.15em !important;
}

.cons-list,
.prose .cons-list,
.note-editable .cons-list {
    list-style-type: disc !important;
    margin: 0 0 0 1.25rem !important;
    padding: 0 !important;
}

.cons-list li,
.prose .cons-list li,
.note-editable .cons-list li {
    display: list-item !important;
    color: #e5e7eb !important;
    margin-bottom: 6px !important;
    padding-left: 4px !important;
    line-height: 1.6 !important;
}

.cons-list li::marker,
.prose .cons-list li::marker,
.note-editable .cons-list li::marker {
    color: #f87171 !important;
    font-size: 1.15em !important;
}

/* ==========================================================================
   Desktop / PC View: Sidebar Mega Menu & Flyout Dropdown Left-Alignment Lock
   Strictly ensures all items in columns remain left-aligned when sidebar
   collapses or screen width narrows (never centering in PC view).
   Mobile view (#mobile-sidebar-overlay) is completely untouched.
   ========================================================================== */
#logo-sidebar .sidebar-menu div[class*="absolute"],
#logo-sidebar .sidebar-menu [x-show],
#logo-sidebar .sidebar-menu .submenu-popup,
#logo-sidebar #more-options-popup,
#logo-sidebar div[class*="absolute"],
#logo-sidebar.w-16 .sidebar-menu div[class*="absolute"],
#logo-sidebar.w-16 .sidebar-menu [x-show],
#logo-sidebar.w-16 .sidebar-menu .submenu-popup,
#logo-sidebar.w-16 #more-options-popup,
html.sidebar-is-collapsed #logo-sidebar .sidebar-menu div[class*="absolute"],
html.sidebar-is-collapsed #logo-sidebar .sidebar-menu [x-show],
html.sidebar-is-collapsed #logo-sidebar .sidebar-menu .submenu-popup,
html.sidebar-is-collapsed #logo-sidebar #more-options-popup {
    text-align: left !important;
}

#logo-sidebar .sidebar-menu div[class*="absolute"] .flex,
#logo-sidebar .sidebar-menu [x-show] .flex,
#logo-sidebar .sidebar-menu .submenu-popup .flex,
#logo-sidebar #more-options-popup .flex,
#logo-sidebar.w-16 .sidebar-menu div[class*="absolute"] .flex,
#logo-sidebar.w-16 .sidebar-menu [x-show] .flex,
#logo-sidebar.w-16 .sidebar-menu .submenu-popup .flex,
#logo-sidebar.w-16 #more-options-popup .flex,
html.sidebar-is-collapsed #logo-sidebar .sidebar-menu div[class*="absolute"] .flex,
html.sidebar-is-collapsed #logo-sidebar .sidebar-menu [x-show] .flex,
html.sidebar-is-collapsed #logo-sidebar .sidebar-menu .submenu-popup .flex,
html.sidebar-is-collapsed #logo-sidebar #more-options-popup .flex {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    text-align: left !important;
}

#logo-sidebar .sidebar-menu div[class*="absolute"] .flex-col,
#logo-sidebar .sidebar-menu [x-show] .flex-col,
#logo-sidebar .sidebar-menu .submenu-popup .flex-col,
#logo-sidebar #more-options-popup .flex-col,
#logo-sidebar.w-16 .sidebar-menu div[class*="absolute"] .flex-col,
#logo-sidebar.w-16 .sidebar-menu [x-show] .flex-col,
#logo-sidebar.w-16 .sidebar-menu .submenu-popup .flex-col,
#logo-sidebar.w-16 #more-options-popup .flex-col,
html.sidebar-is-collapsed #logo-sidebar .sidebar-menu div[class*="absolute"] .flex-col,
html.sidebar-is-collapsed #logo-sidebar .sidebar-menu [x-show] .flex-col,
html.sidebar-is-collapsed #logo-sidebar .sidebar-menu .submenu-popup .flex-col,
html.sidebar-is-collapsed #logo-sidebar #more-options-popup .flex-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

#logo-sidebar .sidebar-menu div[class*="absolute"] a,
#logo-sidebar .sidebar-menu [x-show] a,
#logo-sidebar .sidebar-menu .submenu-popup a,
#logo-sidebar #more-options-popup a,
#logo-sidebar.w-16 .sidebar-menu div[class*="absolute"] a,
#logo-sidebar.w-16 .sidebar-menu [x-show] a,
#logo-sidebar.w-16 .sidebar-menu .submenu-popup a,
#logo-sidebar.w-16 #more-options-popup a,
html.sidebar-is-collapsed #logo-sidebar .sidebar-menu div[class*="absolute"] a,
html.sidebar-is-collapsed #logo-sidebar .sidebar-menu [x-show] a,
html.sidebar-is-collapsed #logo-sidebar .sidebar-menu .submenu-popup a,
html.sidebar-is-collapsed #logo-sidebar #more-options-popup a {
    display: flex !important;
    width: 100% !important;
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: left !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    padding-top: 0.375rem !important;
    padding-bottom: 0.375rem !important;
    margin-right: auto !important;
    margin-left: 0 !important;
}

#logo-sidebar .sidebar-menu div[class*="absolute"] a *,
#logo-sidebar .sidebar-menu div[class*="absolute"] a span,
#logo-sidebar .sidebar-menu [x-show] a *,
#logo-sidebar .sidebar-menu [x-show] a span,
#logo-sidebar .sidebar-menu .submenu-popup a *,
#logo-sidebar .sidebar-menu .submenu-popup a span,
#logo-sidebar #more-options-popup a *,
#logo-sidebar #more-options-popup a span,
#logo-sidebar.w-16 .sidebar-menu div[class*="absolute"] a span,
#logo-sidebar.w-16 .sidebar-menu [x-show] a span,
#logo-sidebar.w-16 .sidebar-menu .submenu-popup a span,
#logo-sidebar.w-16 #more-options-popup a span,
html.sidebar-is-collapsed #logo-sidebar .sidebar-menu div[class*="absolute"] a span,
html.sidebar-is-collapsed #logo-sidebar .sidebar-menu [x-show] a span,
html.sidebar-is-collapsed #logo-sidebar .sidebar-menu .submenu-popup a span,
html.sidebar-is-collapsed #logo-sidebar #more-options-popup a span {
    text-align: left !important;
    margin-right: auto !important;
    margin-left: 0 !important;
    justify-self: flex-start !important;
}