/*
 * Storefront Announcements
 *
 * Reusable announcement banner with category-based themes.
 *
 * Categories:
 *   info        - General information
 *   warning     - Warnings and service disruptions
 *   maintenance - Closures and maintenance
 *   success     - Positive updates
 *
 * Expandable details use native HTML details/summary,
 * requiring no JavaScript.
 */


/* ==========================================================
   Base component
   ========================================================== */

.store-announcement {
    --announcement-bg: #edf4ff;
    --announcement-border: #aac7ed;
    --announcement-text: #173f70;
    --announcement-accent: #245a99;

    width: 100%;
    padding: 1.125rem 1.25rem;

    color: var(--announcement-text);
    background-color: var(--announcement-bg);

    border: 1px solid var(--announcement-border);
    border-left: 4px solid var(--announcement-accent);
    border-radius: 0.625rem;

    box-sizing: border-box;
}


/* ==========================================================
   Category themes
   ========================================================== */

.store-announcement--info {
    --announcement-bg: #edf4ff;
    --announcement-border: #aac7ed;
    --announcement-text: #173f70;
    --announcement-accent: #245a99;
}

.store-announcement--warning {
    --announcement-bg: #fff8e8;
    --announcement-border: #e6ca88;
    --announcement-text: #755000;
    --announcement-accent: #ad7600;
}

.store-announcement--maintenance {
    --announcement-bg: #fff0f0;
    --announcement-border: #e5aaaa;
    --announcement-text: #7a2929;
    --announcement-accent: #ad3d3d;
}

.store-announcement--success {
    --announcement-bg: #edf9f1;
    --announcement-border: #a5d6b6;
    --announcement-text: #215c38;
    --announcement-accent: #29834a;
}


/* ==========================================================
   Component layout
   ========================================================== */

.store-announcement__layout {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
}

.store-announcement__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 1.5rem;
    width: 1.5rem;
    height: 1.5rem;

    font-size: 1.35rem;
    line-height: 1;

    color: var(--announcement-accent);
}

.store-announcement__content {
    flex: 1;
    min-width: 0;
}


/* ==========================================================
   Announcement text
   ========================================================== */

.store-announcement__title {
    margin: 0 0 0.375rem;

    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;

    color: var(--announcement-text);
}

.store-announcement__message {
    font-size: 0.925rem;
    line-height: 1.65;

    overflow-wrap: anywhere;
}


/* ==========================================================
   Expandable details
   ========================================================== */

.store-announcement__details {
    margin-top: 0.875rem;
}

.store-announcement__summary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;

    padding: 0.25rem 0;

    font-size: 0.875rem;
    font-weight: 600;

    color: var(--announcement-accent);

    cursor: pointer;
    list-style: none;
}

.store-announcement__summary::-webkit-details-marker {
    display: none;
}

.store-announcement__summary::marker {
    content: "";
}

.store-announcement__summary:hover {
    text-decoration: underline;
}

.store-announcement__summary:focus-visible {
    outline: 2px solid var(--announcement-accent);
    outline-offset: 4px;
    border-radius: 2px;
}


/* ==========================================================
   Expand/collapse indicator
   ========================================================== */

.store-announcement__chevron {
    display: inline-block;

    width: 0.45rem;
    height: 0.45rem;

    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;

    transform: rotate(45deg);

    transition: transform 0.2s ease;
}

.store-announcement__details[open]
.store-announcement__chevron {
    transform: rotate(225deg);
}


/* ==========================================================
   Expanded Markdown content
   ========================================================== */

.store-announcement__expanded {
    margin-top: 0.75rem;
    padding-top: 0.875rem;

    border-top: 1px solid var(--announcement-border);

    font-size: 0.9rem;
    line-height: 1.7;

    overflow-wrap: anywhere;
}

.store-announcement__expanded p {
    margin: 0 0 0.75rem;
}

.store-announcement__expanded p:last-child {
    margin-bottom: 0;
}

.store-announcement__expanded ul,
.store-announcement__expanded ol {
    margin: 0.5rem 0 0.875rem;
    padding-left: 1.5rem;
}

.store-announcement__expanded li {
    margin-bottom: 0.35rem;
}

.store-announcement__expanded a {
    color: var(--announcement-accent);

    text-decoration: underline;
    text-underline-offset: 2px;
}

.store-announcement__expanded a:hover {
    text-decoration-thickness: 2px;
}


/* ==========================================================
   Mobile layout
   ========================================================== */

@media (max-width: 576px) {
    .store-announcement {
        padding: 0.875rem 1rem;
    }

    .store-announcement__layout {
        gap: 0.625rem;
    }

    .store-announcement__icon {
        flex-basis: 1.25rem;
        width: 1.25rem;
        height: 1.25rem;

        font-size: 1.15rem;
    }

    .store-announcement__title {
        font-size: 0.95rem;
    }

    .store-announcement__message,
    .store-announcement__expanded {
        font-size: 0.875rem;
    }
}


/* ==========================================================
   Reduced motion accessibility
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
    .store-announcement__chevron {
        transition: none;
    }
}