/* CORE STYLES */
#wb-crisis-banner {
box-sizing: border-box;
width: 100%;
background-color: #D32F2F; /* High-Alert Red */
color: #ffffff;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
/* 'relative' ensures it sits at the top but scrolls away when user scrolls down */
position: relative;
z-index: 99999;
padding: 10px 5%;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 12px;
text-align: center;
line-height: 1.4;
} /* TEXT LABEL STYLES */
.wb-banner-label {
font-weight: 800;
font-size: 18px;
text-transform: uppercase;
letter-spacing: 0.5px;
display: flex;
align-items: center;
gap: 8px;
margin-right: 10px;
} /* UPDATED: Icon is now contained in a white circle for max visibility */
.wb-alert-icon {
font-size: 20px;
background-color: #ffffff;
border-radius: 50%;
width: 32px;
height: 32px;
display: inline-flex;
justify-content: center;
align-items: center;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
animation: wb-pulse 2s infinite;
} /* BUTTON CONTAINER */
.wb-action-group {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
align-items: center;
} /* BUTTON BASE STYLES */
.wb-crisis-btn {
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none !important;
font-weight: 700;
font-size: 15px;
padding: 8px 16px;
border-radius: 50px;
transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
white-space: nowrap;
border: 2px solid transparent;
cursor: pointer;
} /* 911 - Critical */
.wb-btn-911 {
background-color: #ffffff;
color: #D32F2F;
border-color: #ffffff;
}
/* UPDATED: Hover snaps text to black and scales up for urgency */
.wb-btn-911:hover, .wb-btn-911:focus {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 6px 14px rgba(0,0,0,0.5);
background-color: #ffffff;
color: #000000; /* Max contrast (Black on White) */
} /* 988 - Secondary */
.wb-btn-988 {
background-color: #FFC107; /* High-vis Amber */
color: #000000;
border-color: #FFC107;
} /* UPDATED: Hover turns button white to match high-vis active state */
.wb-btn-988:hover, .wb-btn-988:focus {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 6px 14px rgba(0,0,0,0.5);
background-color: #ffffff;
border-color: #ffffff;
color: #000000;
} /* SMS - Text Action */
/* UPDATED: Hover state flips to white background for clarity */
.wb-btn-sms {
background-color: transparent;
border: 2px solid #ffffff;
color: #ffffff;
} .wb-btn-sms:hover, .wb-btn-sms:focus {
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0,0,0,0.4);
background-color: #ffffff;
color: #D32F2F; /* Turns red text on white background */
}
/* INTERNATIONAL - Global Support */
.wb-btn-intl {
background-color: transparent;
border: 1px solid rgba(255,255,255,0.6);
color: #ffffff;
font-weight: 600; /* Slightly lighter weight than emergency numbers */
font-size: 14px;
padding: 8px 14px;
} .wb-btn-intl:hover, .wb-btn-intl:focus {
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0,0,0,0.4);
background-color: #E0F7FA; /* Light Cyan */
border-color: #E0F7FA;
color: #006064; /* Dark Cyan Text */
} /* ANIMATION */
@keyframes wb-pulse {
0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
50% { transform: scale(1.05); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
} /* MOBILE ADJUSTMENTS */
@media (max-width: 900px) {
#wb-crisis-banner {
flex-direction: column;
padding: 15px;
} .wb-banner-label {
margin-right: 0;
margin-bottom: 8px;
font-size: 16px;
} .wb-action-group {
width: 100%;
flex-direction: column;
} .wb-crisis-btn {
width: 100%;
padding: 12px;
font-size: 18px; /* Larger text for mobile readability */
}
} document.addEventListener('DOMContentLoaded', function() {
// 1. Force Banner to Top of Body
// This ensures that even if you paste this code in the footer,
// it will visually jump to the very top of the website.
var banner = document.getElementById('wb-crisis-banner');
if (banner && document.body) {
document.body.prepend(banner);
} // 2. SMS Logic for iOS vs Android
var userAgent = navigator.userAgent || navigator.vendor || window.opera;
var smsBtn = document.querySelector('.wb-btn-sms');
// iOS delimiter check
if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
smsBtn.href = "sms:741741&body=HOME";
} else {
smsBtn.href = "sms:741741?body=HOME";
}
});
