﻿/* =========================
   NOTICE SECTION
   ========================= */

.notice-section {
    padding: 3rem 2rem;
    border-radius: var(--radius-lg);
    margin-bottom: 3rem;
}


/* =========================
   NOTICE BANNER (Urgent)
   ========================= */

.notice-banner {
    background: rgba(185, 28, 28, 0.08);
    border-left: 5px solid var(--primary);
    padding: 1rem 1.25rem;
    border-radius: var(--radius-md);
}

    .notice-banner strong {
        color: var(--primary);
    }
    .notice-banner span {
        color: var(--text-main);
    }

/* =========================
   NOTICE CARDS – FINAL STYLE
   ========================= */

.notice-card {
    position: relative;
    background: var(--bg-card);
    /* Outline + shape */
    border: 2px solid var(--primary);
    border-radius: 28px;
    /* Override global .card */
    box-shadow: none !important;
    padding: 2rem !important;
    transform: none;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

    .notice-card:hover {
        border-color: var(--primary);
        box-shadow: 0 10px 28px rgba(0,0,0,0.08);
        transform: translateY(-3px);
    }


    /* =========================
   NOTICE CARD CONTENT
   ========================= */

    .notice-card .card-title {
        color: var(--text-main);
        font-weight: 600;
    }

    .notice-card .text-muted.small {
        font-size: 0.85rem;
        margin-bottom: 1rem;
    }

    .notice-card .card-text {
        line-height: 1.7;
        color: var(--text-main);
    }


    /* =========================
   NOTICE CARD ACTIONS
   ========================= */

    .notice-card .btn-outline-theme {
        border: none;
        background: transparent;
        padding: 0.5rem 1.25rem;
        color: var(--text-muted);
        font-weight: 600;
        border-radius: 999px; /* pill shape */
        box-shadow: none;
        transition: background-color .2s ease, color .2s ease;
    }

        .notice-card .btn-outline-theme:hover,
        .notice-card .btn-outline-theme:focus,
        .notice-card .btn-outline-theme:focus-visible,
        .notice-card .btn-outline-theme:active {
            color: var(--text-inverse);
            background: var(--primary);
            box-shadow: none;
            outline: none;
            text-decoration: underline;
        }

/* =========================
   NOTICE ACTION LINKS
   ========================= */

.create-notice-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.9rem 1.5rem;
    background: var(--primary);
    color: var(--text-inverse);
    border-radius: 999px;
    font-weight: 600;
    font-size: 1rem;
    transition: background-color .2s ease, transform .15s ease, box-shadow .15s ease;
}

    .create-notice-btn:hover {
        background: var(--primary-hover);
        color: var(--text-inverse);
        text-decoration: none;
        transform: translateY(-1px);
        box-shadow: 0 6px 18px rgba(0,0,0,0.15);
    }

/* =========================
   GLOBAL NOTICE BAR (Urgent)
   ========================= */

.global-notice-bar {
    background: rgba(185, 28, 28, 0.12); /* soft school red */
    border-bottom: 3px solid var(--primary);
}

    .global-notice-bar .container {
        max-width: 1200px;
    }

.global-notice-item {
    color: var(--text-main);
    font-weight: 500;
    white-space: normal;
}

    .global-notice-item strong {
        color: var(--primary);
        margin-right: 0.25rem;
    }

@media (max-width: 576px) {
    .global-notice-item {
        font-size: 0.9rem;
    }
}
