/* Custom styles for Statuspage Shortcode */

:root {
    --status-color-operational:   #2FCC66;
    --status-color-minor:         #d5ac0a;
    --status-color-major:         #bf3c2f;
    --status-color-maintenance:   #3498DB;
    --status-color-unavailable:   #999999;
}

/* ------------------------
   Footer status widget
   ------------------------ */
.statuspage-shortcode {
    font-weight: 500;
}

.statuspage-shortcode .status-indicator {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    vertical-align: top;
    margin: 2px 8px 0 0;
}

.statuspage-shortcode p {
    margin: 5px 0;
}

.statuspage-shortcode .status-none          { background-color: var(--status-color-operational) !important; }
.statuspage-shortcode .status-minor         { background-color: var(--status-color-minor) !important; }
.statuspage-shortcode .status-major         { background-color: var(--status-color-major) !important; }
.statuspage-shortcode .status-critical      { background-color: var(--status-color-major) !important; }
.statuspage-shortcode .status-maintenance   { background-color: var(--status-color-maintenance) !important; }
.statuspage-shortcode .status-outage        { background-color: var(--status-color-major) !important; }
.statuspage-shortcode .status-unavailable   { background-color: var(--status-color-unavailable) !important; }

/* Unavailable fallback styling (link subdued) */
.statuspage-shortcode .status-unavailable ~ a { color: #666; text-decoration: none; }
.statuspage-shortcode .status-unavailable ~ a:hover,
.statuspage-shortcode .status-unavailable ~ a:active,
.statuspage-shortcode .status-unavailable ~ a:focus { color: #666; text-decoration: underline; }

/* ------------------------
   Banner
   ------------------------ */
.statuspage-banner {
    padding: 10px;
    color: #fff;
    font-weight: 700;
    line-height: 1.1;
}

.statuspage-banner.status-none          { background-color: var(--status-color-operational) !important; }
.statuspage-banner.status-minor         { background-color: var(--status-color-minor) !important; }
.statuspage-banner.status-major         { background-color: var(--status-color-major) !important; }
.statuspage-banner.status-critical      { background-color: var(--status-color-major) !important; }
.statuspage-banner.status-maintenance   { background-color: var(--status-color-maintenance) !important; }
.statuspage-banner.status-outage        { background-color: var(--status-color-major) !important; }
.statuspage-banner.status-unavailable   { background-color: var(--status-color-unavailable) !important; }

.statuspage-banner .container {
    display: flex;
    align-items: center;
}

.statuspage-banner .icon-wrap {
    margin-right: 10px;
}
.statuspage-banner .message-wrap {
    flex: 1;
    margin-right: 15px;
}

.statuspage-banner a {
    color: #fff;
    text-decoration: underline;
}
.statuspage-banner a:hover,
.statuspage-banner a:active,
.statuspage-banner a:focus {
    color: #fff;
    text-decoration: underline;
}

/* On small screens: let the link wrap onto its own line */
@media (max-width: 767px) {
    .statuspage-banner .container {
        flex-wrap: wrap;
    }
    .statuspage-banner .link-wrap {
        flex-basis: 100%;
        margin-top: 6px;
        margin-left: 38px; /* icon (28px) + icon-wrap margin-right (10px) */
    }
}