/**
 * Story Modal Styles
 */

/* Modal Container */


@media (min-width: 640px) {
    .story-modal-close svg {
        width: 1.75rem;
        height: 1.75rem;
    }
}

.story-modal-close:hover {
    background-color: #FFB81C !important;
    color: #003594 !important;
}

.story-modal-close:focus-visible {
    outline: 4px solid rgba(26, 83, 255, 0.3);
    outline-offset: 2px;
}

/* Modal Body */
.story-modal-body {
    padding: 40px 30px 30px;
}

@media (min-width: 768px) {
    .story-modal-body {
        padding: 50px 40px 40px;
    }
}

/* Modal Title */
.story-modal-title {
    font-size: 32px;
    font-weight: 600;
    color: #003594;
    margin: 0 0 20px 0;
    line-height: 1.2;
}

@media (min-width: 768px) {
    .story-modal-title {
        font-size: 40px;
        margin-bottom: 24px;
    }
}

/* Modal Text */
.story-modal-text {
    color: #003594;
    font-size: 16px;
    line-height: 1.6;
}

.story-modal-text p {
    margin: 0 0 16px 0;
}

.story-modal-text p:last-child {
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .story-modal-text {
        font-size: 18px;
    }
}

/* Scrollbar Styling (dialog content wrappers; no <main> inside dialogs) */
.story-modal-content .home-story-modal::-webkit-scrollbar,
.story-modal-content div[class*="max-w-"][class*="overflow-y-auto"]::-webkit-scrollbar {
    width: 8px;
}

.story-modal-content .home-story-modal::-webkit-scrollbar-track,
.story-modal-content div[class*="max-w-"][class*="overflow-y-auto"]::-webkit-scrollbar-track {
    background: #f1f1f1;
    /* border-radius: 4px; */
}

.story-modal-content .home-story-modal::-webkit-scrollbar-thumb,
.story-modal-content div[class*="max-w-"][class*="overflow-y-auto"]::-webkit-scrollbar-thumb {
    background: hwb(0 69% 31%);
    /* border-radius: 4px; */
}

.story-modal-content .home-story-modal::-webkit-scrollbar-thumb:hover,
.story-modal-content div[class*="max-w-"][class*="overflow-y-auto"]::-webkit-scrollbar-thumb:hover {
    background: #bbbbbb;
}

/* Ensure dialog content wrappers have no unwanted borders */
.story-modal-content .home-story-modal,
.story-modal-content div[class*="max-w-"] {
    border: none;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}