/* Custom overrides — only add here when a Tailwind utility class is insufficient */
/* Apply dark mode styles only when .dark is active */
.dark .ql-toolbar.ql-snow {
    background-color: #1e1e1e !important;
    border-color: #444444 !important;
}

/* Brighten SVG Icons */
.dark .ql-snow .ql-toolbar .ql-stroke {
    stroke: #e0e0e0 !important;
}

.dark .ql-snow .ql-toolbar .ql-fill {
    fill: #e0e0e0 !important;
}

/* Dropdown Menu Headers */
.dark .ql-snow .ql-toolbar .ql-picker {
    color: #e0e0e0 !important;
}

.dark .ql-snow .ql-toolbar .ql-picker-label .ql-stroke {
    stroke: #e0e0e0 !important;
}

/* Fix Dropdown Menu Expansions */
.dark .ql-snow .ql-toolbar .ql-picker-options {
    background-color: #2a2a2a !important;
    border-color: #444444 !important;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.5) !important;
}

.dark .ql-snow .ql-toolbar .ql-picker-item {
    color: #e0e0e0 !important;
}

/* Hover and Active Highlights */
.dark .ql-snow .ql-toolbar button:hover .ql-stroke,
.dark .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
.dark .ql-snow .ql-toolbar button.ql-active .ql-stroke,
.dark .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke {
    stroke: #4dabf7 !important; /* Bright blue highlight */
}

.dark .ql-snow .ql-toolbar button:hover .ql-fill,
.dark .ql-snow .ql-toolbar button.ql-active .ql-fill {
    fill: #4dabf7 !important;
}

.dark .ql-snow .ql-toolbar .ql-picker-item:hover,
.dark .ql-snow .ql-toolbar .ql-picker-item.ql-selected {
    color: #4dabf7 !important;
    background-color: #333333 !important;
}

/* Match the Editor Container to Dark Mode */
.dark .ql-container.ql-snow {
    background-color: #121212 !important;
    color: #ffffff !important;
    border-color: #444444 !important;
}
@keyframes hs-hero-day-night {
    0%, 18% {
        opacity: 0;
    }

    42%, 62% {
        opacity: 1;
    }

    86%, 100% {
        opacity: 0;
    }
}