/* ==========================================================================
   Safe On Stage Nav Strip
   Extends: service-nav-strip.css (base classes)
   Used on: Pages/Company/Safe-On-Stage/ (hub and all six sub-pages)
   Palette: black, hard red, gold only — no teal, no purple, no gradients
   ========================================================================== */

.sos-nav-circle--black { background: #0a0a0a; }
.sos-nav-circle--red   { background: #CC0000; }
.sos-nav-circle--gold  { background: var(--gold); }

/* Mental Safety — solid black */
.sos-nav-title--mental {
    color: #0a0a0a;
    -webkit-text-fill-color: #0a0a0a;
}

/* Physical Safety — hard red */
.sos-nav-title--physical {
    color: #CC0000;
    -webkit-text-fill-color: #CC0000;
}

/* Moral Guidelines — gold */
.sos-nav-title--moral {
    color: var(--gold-dark);
    -webkit-text-fill-color: var(--gold-dark);
}

/* Performance Safety — red-to-black */
.sos-nav-title--performance {
    background: linear-gradient(135deg, #CC0000 0%, #0a0a0a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

/* Legal Framework — solid black */
.sos-nav-title--legal {
    color: #0a0a0a;
    -webkit-text-fill-color: #0a0a0a;
}

/* Pre-Show Protocol — gold-to-red */
.sos-nav-title--protocol {
    background: linear-gradient(135deg, var(--gold-dark) 0%, #CC0000 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

@media (max-width: 768px) {
    .sh-nav-grid { grid-template-columns: 1fr; }
}