/* ═══════════════════════════════════════════════════════════════
   首頁公告橫幅（可堆疊）
   獨立檔案，覆蓋 main.css 中舊的 #alert-banner 單一橫幅樣式。
   色彩對比皆符合 AA（≥ 4.5:1）。
   ═══════════════════════════════════════════════════════════════ */

#alert-banner {
    background: none;
    padding: 0;
    color: inherit;
}

.ab-bar {
    padding: 0.6rem 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
.ab-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.ab-icon { font-size: 1.1rem; flex: 0 0 auto; }
.ab-badge {
    flex: 0 0 auto;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    letter-spacing: 0.03em;
}
.ab-title {
    flex: 1 1 260px;
    min-width: 0;
    font-weight: 600;
    line-height: 1.5;
    color: inherit;
}
a.ab-title { text-decoration: underline; text-underline-offset: 3px; }
.ab-close {
    flex: 0 0 auto;
    margin-left: auto;
    min-height: 32px;
    padding: 0.25rem 0.85rem;
    border-radius: 4px;
    cursor: pointer;
    font: inherit;
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid currentColor;
    color: inherit;
}
.ab-close:hover { background: rgba(255, 255, 255, 0.28); }
.ab-close:focus-visible,
a.ab-title:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ── 重要公告（breakingnews）：沿用原本的琥珀色，加深以符合 AA（白字 5.22:1）── */
.ab-breakingnews { background: #a35a00; color: #fff; }
.ab-breakingnews .ab-badge { background: #fff; color: #a35a00; }

/* ── 施工通告（construction）：深灰底＋黃色施工警示條（黃字 10.45:1、白字 14.76:1）── */
.ab-construction {
    background: #1f2933;
    color: #fff;
    border-top: 6px solid transparent;
    border-image: repeating-linear-gradient(-45deg, #ffd60a 0 10px, #1f2933 10px 20px) 6;
}
.ab-construction .ab-icon { color: #ffd60a; }
.ab-construction .ab-badge { background: #ffd60a; color: #1f2933; }
.ab-construction .ab-close:focus-visible,
.ab-construction a.ab-title:focus-visible { outline-color: #ffd60a; }

@media (max-width: 600px) {
    .ab-bar { padding: 0.55rem 0.75rem; }
    .ab-title { flex-basis: 100%; order: 3; }
    .ab-close { order: 2; }
}

@media print { #alert-banner { display: none !important; } }