/* Special Event Notice
   The site's single modal. Drives every scheduled notice — the Christmas
   closure as well as the special occasion dates (Mother's Day, Father's Day,
   Valentine's Day) — all configured in data/special-events.json.

   This replaced the separate holiday-popup.css; there is no longer a second
   modal to keep in visual sync. */

.event-notice-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(38, 37, 38, 0.95);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    /* pointer-events rather than visibility: a visibility:hidden ancestor makes
       the dialog unfocusable, so focus() on open would silently do nothing.
       The overlay is removed from the DOM on close, so this only has to cover
       the fade in and out. */
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.event-notice-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.event-notice {
    background-color: #262526;
    border: 2px solid #c59d5f;
    border-radius: 8px;
    max-width: 560px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    animation: eventNoticeSlideIn 0.4s ease-out;
}

.event-notice:focus {
    outline: none;
}

@keyframes eventNoticeSlideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.event-notice__content {
    padding: 50px 40px 40px;
    text-align: center;
    color: #ffffff;
}

.event-notice__close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: none;
    color: #c59d5f;
    font-size: 32px;
    cursor: pointer;
    line-height: 1;
    padding: 5px 10px;
    transition: transform 0.2s ease, color 0.2s ease;
    z-index: 1;
}

.event-notice__close:hover,
.event-notice__close:focus-visible {
    color: #d4b278;
    transform: rotate(90deg);
}

.event-notice__icon {
    font-size: 44px;
    line-height: 1;
    margin-bottom: 18px;
}

.event-notice__title {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: #c59d5f;
    margin-bottom: 8px;
    line-height: 1.2;
}

.event-notice__subtitle {
    font-family: "Herr Von Muellerhoff", cursive;
    font-size: 36px;
    font-weight: 400;
    color: #c59d5f;
    line-height: 1.2;
    margin-bottom: 10px;
}

.event-notice__date {
    font-family: "Cabin", sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 25px;
}

.event-notice__body {
    background-color: rgba(197, 157, 95, 0.1);
    border-left: 4px solid #c59d5f;
    padding: 22px 25px;
    margin: 0 0 28px;
    text-align: left;
}

.event-notice__body p {
    font-family: "Cabin", sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: #d9d9d9;
    margin-bottom: 12px;
}

.event-notice__body p:last-child {
    margin-bottom: 0;
}

.event-notice__body strong {
    color: #c59d5f;
    font-weight: 600;
}

.event-notice__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.event-notice__button {
    display: inline-block;
    background-color: #c59d5f;
    color: #262526;
    border: none;
    padding: 15px 40px;
    font-family: "Cabin", sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(197, 157, 95, 0.3);
}

.event-notice__button:hover,
.event-notice__button:focus-visible {
    background-color: #d4b278;
    color: #262526;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(197, 157, 95, 0.4);
}

.event-notice__dismiss {
    background: transparent;
    border: none;
    color: #b3b3b3;
    font-family: "Cabin", sans-serif;
    font-size: 15px;
    letter-spacing: 0.5px;
    cursor: pointer;
    padding: 6px 10px;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.event-notice__dismiss:hover,
.event-notice__dismiss:focus-visible {
    color: #ffffff;
}

/* Prevent body scroll while the notice is open */
body.event-notice-open {
    overflow: hidden;
}

/* Mobile */
@media (max-width: 768px) {
    .event-notice {
        width: 95%;
        max-height: 85vh;
    }

    .event-notice__content {
        padding: 45px 30px 30px;
    }

    .event-notice__title {
        font-size: 25px;
    }

    .event-notice__subtitle {
        font-size: 30px;
    }

    .event-notice__date {
        font-size: 15px;
    }

    .event-notice__body {
        padding: 20px;
    }

    .event-notice__body p {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .event-notice__content {
        padding: 40px 20px 25px;
    }

    .event-notice__icon {
        font-size: 38px;
        margin-bottom: 14px;
    }

    .event-notice__title {
        font-size: 22px;
    }

    .event-notice__subtitle {
        font-size: 26px;
    }

    .event-notice__date {
        font-size: 14px;
        margin-bottom: 20px;
    }

    .event-notice__body {
        padding: 16px;
        margin-bottom: 22px;
    }

    .event-notice__body p {
        font-size: 14px;
        line-height: 1.7;
    }

    .event-notice__button {
        padding: 13px 30px;
        font-size: 14px;
    }

    .event-notice__close {
        font-size: 28px;
        top: 10px;
        right: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .event-notice {
        animation: none;
    }

    .event-notice-overlay,
    .event-notice__button,
    .event-notice__close {
        transition: none;
    }
}