/* ──────────────────────────────────────────────────────────────────────
   Home Announcement Themes
   ──────────────────────────────────────────────────────────────────────
   Admin picks a theme; each one styles the outer FRAME only.
   Content (text colors, headings, background-color) set inline by admin
   in the rich-text editor stays untouched.
   ────────────────────────────────────────────────────────────────────── */

.home-announcement {
    position: relative;
    margin: 18px 0 26px;
    border-radius: 14px;
    padding: 6px;
    isolation: isolate;
}

/* Admin-only strip above the announcement.
   Makes it crystal clear this banner is editable and only visible because
   the viewer is an admin. Regular members never receive this markup. */
.home-announcement-admin-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: -2px 4px 8px;
    padding: 6px 12px;
    background: linear-gradient(90deg, #fff3cd 0%, #ffe69c 100%);
    border: 1px dashed #c79a2b;
    border-radius: 8px;
    color: #6b4e0a;
    font-size: .82rem;
    line-height: 1.3;
    position: relative;
    z-index: 4;
}
.home-announcement-admin-bar .ann-admin-eye { font-size: 1rem; }
.home-announcement-admin-bar .ann-admin-label {
    flex: 1 1 auto;
    font-weight: 600;
    letter-spacing: .02em;
}
.home-announcement-admin-bar .ann-admin-actions {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
}
.home-announcement-admin-bar .ann-admin-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border: 1px solid #c79a2b;
    border-radius: 14px;
    background: rgba(255, 255, 255, .65);
    color: #6b4e0a;
    text-decoration: none;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.home-announcement-admin-bar .ann-admin-link:hover {
    background: #6b4e0a;
    color: #fff;
    border-color: #6b4e0a;
    text-decoration: none;
}
.home-announcement-admin-bar .ann-admin-link svg { display: block; }
.home-announcement-admin-bar .ann-admin-disable:hover {
    background: #b72828;
    border-color: #b72828;
}
.home-announcement-admin-bar .ann-admin-bar-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    margin-left: 2px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #6b4e0a;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.home-announcement-admin-bar .ann-admin-bar-close:hover {
    background: rgba(107, 78, 10, .18);
    color: #3b2a05;
}
.home-announcement-admin-bar .ann-admin-bar-close svg { display: block; }
@media (max-width: 640px) {
    .home-announcement-admin-bar { font-size: .76rem; padding: 6px 10px; }
    .home-announcement-admin-bar .ann-admin-label { flex-basis: 100%; }
}

.home-announcement .alert {
    position: relative;
    margin: 0;
    padding: 22px 26px;
    border: 0;
    border-radius: 10px;
    background: #ffffff;
    color: #222;
    overflow: hidden;
}

.home-announcement .alert h1,
.home-announcement .alert h2,
.home-announcement .alert h3,
.home-announcement .alert h4,
.home-announcement .alert h5 {
    margin: .25em 0 .5em;
    line-height: 1.3;
}

/* Close button — themed per-skin below, default first */
.home-announcement .close.announcements-option {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 3;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, .06);
    color: #555;
    transition: background .15s ease, color .15s ease, transform .15s ease;
    float: none !important;
    cursor: pointer;
}

.home-announcement .close.announcements-option:hover {
    background: rgba(0, 0, 0, .14);
    color: #111;
    transform: scale(1.06);
}

.home-announcement .close.announcements-option svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* Decorative corner ornaments shared utility */
.home-announcement::before,
.home-announcement::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

/* ============================================================
   THEME: classic — Clean white card with soft shadow (default)
   ============================================================ */
.home-announcement[data-theme="classic"] {
    background: #ffffff;
    border: 1px solid #e6e6e6;
    box-shadow: 0 4px 18px rgba(20, 30, 60, .07);
}
.home-announcement[data-theme="classic"] .alert {
    box-shadow: none;
}

/* ============================================================
   THEME: royal — Deep navy frame with gold double border
   ============================================================ */
.home-announcement[data-theme="royal"] {
    background: linear-gradient(135deg, #16234d 0%, #2a3d7a 100%);
    border: 3px double #d4af37;
    box-shadow:
        0 6px 26px rgba(20, 30, 80, .35),
        inset 0 0 0 1px rgba(212, 175, 55, .35);
    padding: 10px;
}
.home-announcement[data-theme="royal"] .alert {
    background: #fdfaf2;
    box-shadow: inset 0 0 0 1px #d4af37;
    border-radius: 6px;
}
.home-announcement[data-theme="royal"] .close.announcements-option {
    background: rgba(212, 175, 55, .22);
    color: #fff5c8;
}
.home-announcement[data-theme="royal"] .close.announcements-option:hover {
    background: rgba(212, 175, 55, .45);
    color: #fff;
}
.home-announcement[data-theme="royal"]::before,
.home-announcement[data-theme="royal"]::after {
    width: 26px;
    height: 26px;
    background: radial-gradient(circle at center, #d4af37 0 32%, transparent 33%);
}
.home-announcement[data-theme="royal"]::before { top: -6px; left: -6px; }
.home-announcement[data-theme="royal"]::after  { bottom: -6px; right: -6px; }

/* ============================================================
   THEME: parchment — Aged paper with sepia border
   ============================================================ */
.home-announcement[data-theme="parchment"] {
    background:
        radial-gradient(ellipse at top left, rgba(160, 110, 50, .15), transparent 60%),
        radial-gradient(ellipse at bottom right, rgba(160, 110, 50, .15), transparent 60%),
        #f3e5c1;
    border: 2px solid #a3753a;
    box-shadow:
        0 4px 22px rgba(120, 80, 30, .25),
        inset 0 0 40px rgba(160, 110, 50, .18);
    padding: 14px;
}
.home-announcement[data-theme="parchment"] .alert {
    background: #fdf6e1;
    border: 1px dashed #c9a35a;
    border-radius: 4px;
}
.home-announcement[data-theme="parchment"] .close.announcements-option {
    background: rgba(120, 80, 30, .15);
    color: #6b4a1f;
}

/* ============================================================
   THEME: scripture — Ivory with red & gold filigree corners
   ============================================================ */
.home-announcement[data-theme="scripture"] {
    background: #fffcf3;
    border: 1px solid #d4b67a;
    box-shadow:
        0 4px 22px rgba(120, 30, 30, .12),
        inset 0 0 0 6px #fffcf3,
        inset 0 0 0 7px #b72828;
    padding: 14px;
}
.home-announcement[data-theme="scripture"] .alert {
    background: #fffcf3;
}
.home-announcement[data-theme="scripture"] .close.announcements-option {
    background: rgba(183, 40, 40, .12);
    color: #8a1f1f;
}
.home-announcement[data-theme="scripture"]::before,
.home-announcement[data-theme="scripture"]::after {
    width: 44px;
    height: 44px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'><g fill='none' stroke='%23b72828' stroke-width='1.5'><path d='M2 22c0-11 9-20 20-20'/><path d='M8 22c0-7.7 6.3-14 14-14'/><circle cx='22' cy='22' r='1.5' fill='%23d4af37' stroke='none'/></g></svg>");
    background-repeat: no-repeat;
}
.home-announcement[data-theme="scripture"]::before {
    top: 2px; left: 2px;
}
.home-announcement[data-theme="scripture"]::after {
    bottom: 2px; right: 2px;
    transform: rotate(180deg);
}

/* ============================================================
   THEME: sunset — Warm peach/coral gradient frame
   ============================================================ */
.home-announcement[data-theme="sunset"] {
    background: linear-gradient(135deg, #ffb47a 0%, #ff7e6b 45%, #d94c8a 100%);
    border: 0;
    box-shadow: 0 8px 28px rgba(217, 76, 138, .25);
    padding: 8px;
}
.home-announcement[data-theme="sunset"] .alert {
    background: #fffaf6;
    border-radius: 8px;
}
.home-announcement[data-theme="sunset"] .close.announcements-option {
    background: rgba(255, 255, 255, .35);
    color: #fff;
}
.home-announcement[data-theme="sunset"] .close.announcements-option:hover {
    background: rgba(255, 255, 255, .55);
}

/* ============================================================
   THEME: ocean — Cool teal/blue gradient frame
   ============================================================ */
.home-announcement[data-theme="ocean"] {
    background: linear-gradient(135deg, #2bc4d6 0%, #2f7fd1 50%, #1a3b8c 100%);
    box-shadow: 0 8px 28px rgba(26, 59, 140, .25);
    padding: 8px;
}
.home-announcement[data-theme="ocean"] .alert {
    background: #f5fbff;
    border-radius: 8px;
}
.home-announcement[data-theme="ocean"] .close.announcements-option {
    background: rgba(255, 255, 255, .3);
    color: #fff;
}
.home-announcement[data-theme="ocean"] .close.announcements-option:hover {
    background: rgba(255, 255, 255, .55);
}

/* ============================================================
   THEME: garden — Soft green with leafy corners
   ============================================================ */
.home-announcement[data-theme="garden"] {
    background: linear-gradient(135deg, #a8d99a 0%, #4f9d5b 100%);
    box-shadow: 0 8px 24px rgba(40, 120, 60, .2);
    padding: 8px;
}
.home-announcement[data-theme="garden"] .alert {
    background: #fbfff7;
    border-radius: 8px;
}
.home-announcement[data-theme="garden"] .close.announcements-option {
    background: rgba(255, 255, 255, .35);
    color: #fff;
}
.home-announcement[data-theme="garden"]::before,
.home-announcement[data-theme="garden"]::after {
    width: 42px;
    height: 42px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 42'><path d='M21 4c8 4 14 10 14 18 0 8-6 14-14 16-8-2-14-8-14-16C7 14 13 8 21 4z' fill='%23ffffff' opacity='.55'/><path d='M21 8v26M14 14c2 5 4 9 7 13M28 14c-2 5-4 9-7 13' stroke='%234f9d5b' stroke-width='1.3' fill='none' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
}
.home-announcement[data-theme="garden"]::before { top: -10px; left: -10px; transform: rotate(-25deg); }
.home-announcement[data-theme="garden"]::after  { bottom: -10px; right: -10px; transform: rotate(155deg); }

/* ============================================================
   THEME: spotlight — Dark gradient with golden frame
   ============================================================ */
.home-announcement[data-theme="spotlight"] {
    background:
        radial-gradient(ellipse at top, rgba(255, 220, 130, .22), transparent 60%),
        linear-gradient(180deg, #1c1c2a 0%, #0c0c14 100%);
    border: 2px solid #d4af37;
    box-shadow:
        0 12px 36px rgba(0, 0, 0, .55),
        inset 0 0 50px rgba(255, 220, 130, .1);
    padding: 10px;
}
.home-announcement[data-theme="spotlight"] .alert {
    background: #fffef6;
    border-radius: 8px;
    box-shadow: 0 0 30px rgba(255, 220, 130, .35);
}
.home-announcement[data-theme="spotlight"] .close.announcements-option {
    background: rgba(212, 175, 55, .2);
    color: #ffd86b;
}

/* ============================================================
   THEME: modern — Clean white with colored top bar
   ============================================================ */
.home-announcement[data-theme="modern"] {
    background: #ffffff;
    border: 1px solid #e8eaf0;
    box-shadow: 0 6px 18px rgba(20, 30, 60, .08);
    padding: 0;
    overflow: hidden;
}
.home-announcement[data-theme="modern"]::before {
    content: "";
    display: block;
    position: relative;
    height: 6px;
    width: 100%;
    background: linear-gradient(90deg, #2f7fd1 0%, #45c4b0 50%, #ffba49 100%);
}
.home-announcement[data-theme="modern"] .alert {
    border-radius: 0;
}

/* ============================================================
   Mobile tweaks
   ============================================================ */
@media (max-width: 640px) {
    .home-announcement .alert { padding: 18px 16px; }
    .home-announcement[data-theme="royal"],
    .home-announcement[data-theme="spotlight"],
    .home-announcement[data-theme="parchment"] { padding: 6px; }
}