/* ==========================================================
   SAGE MENTAL HEALTH REALM — PERMANENT V3

   Source of truth is now:
   static/data/sage-desktop-apps.json

   No DOM replacement JavaScript.
   ========================================================== */


/*
   Scope this treatment ONLY to the Explore the Realms
   button pointing at the wellness destination.
*/

.realms-panel
a[href="https://empire.bkscreations.com/radio/#wellness"],

.realms-panel
button[data-href="https://empire.bkscreations.com/radio/#wellness"],

.realms-panel
[data-url="https://empire.bkscreations.com/radio/#wellness"] {

    border-color:
        rgba(73, 255, 163, .94) !important;

    background:
        radial-gradient(
            circle at 50% 18%,
            rgba(40, 255, 151, .27),
            rgba(8, 55, 34, .94) 48%,
            rgba(3, 17, 11, .99) 100%
        ) !important;

    color:
        #e8fff2 !important;

    box-shadow:
        inset 0 0 0 1px rgba(205,255,228,.16),
        inset 0 0 14px rgba(54,255,164,.12),
        0 0 8px rgba(46,255,157,.46),
        0 0 18px rgba(37,230,143,.22) !important;

    text-shadow:
        0 0 6px rgba(61,255,168,.38) !important;
}


/*
   Icon / symbol inside the generated realm button.
*/

.realms-panel
a[href="https://empire.bkscreations.com/radio/#wellness"]
:first-child,

.realms-panel
button[data-href="https://empire.bkscreations.com/radio/#wellness"]
:first-child {

    color:
        #75ffb9 !important;

    border-color:
        rgba(101,255,185,.84) !important;

    text-shadow:
        0 0 7px rgba(71,255,174,.65) !important;

    box-shadow:
        0 0 8px rgba(55,255,163,.32) !important;
}


/*
   Hover — brighter green, still restrained.
*/

.realms-panel
a[href="https://empire.bkscreations.com/radio/#wellness"]:hover,

.realms-panel
a[href="https://empire.bkscreations.com/radio/#wellness"]:focus-visible,

.realms-panel
button[data-href="https://empire.bkscreations.com/radio/#wellness"]:hover,

.realms-panel
button[data-href="https://empire.bkscreations.com/radio/#wellness"]:focus-visible {

    border-color:
        #83ffc1 !important;

    background:
        radial-gradient(
            circle at 50% 18%,
            rgba(54,255,163,.35),
            rgba(10,72,43,.96) 50%,
            rgba(3,20,13,.99) 100%
        ) !important;

    box-shadow:
        inset 0 0 0 1px rgba(220,255,236,.22),
        inset 0 0 17px rgba(60,255,169,.17),
        0 0 11px rgba(57,255,166,.60),
        0 0 24px rgba(38,235,145,.29) !important;
}


/* ============================================================
   SAGE_MH_REALM_GREEN_GLOW_RESTORE_V1
   Mental Health must visually stand apart in Explore the Realms.
   ============================================================ */

.realm-placeholder[href$="/mental-health"],
.realm-placeholder[href$="/mental-health/"] {

    border-color:
        rgba(91, 255, 169, .90) !important;

    background:
        radial-gradient(
            circle at 50% 25%,
            rgba(66, 255, 153, .30),
            transparent 54%
        ),
        linear-gradient(
            180deg,
            rgba(17, 99, 64, .72),
            rgba(9, 38, 32, .94)
        ) !important;

    box-shadow:
        0 0 8px rgba(61, 255, 151, .72),
        0 0 18px rgba(61, 255, 151, .40),
        0 0 30px rgba(61, 255, 151, .20),
        inset 0 0 16px rgba(77, 255, 164, .16)
        !important;
}


.realm-placeholder[href$="/mental-health"]
.realm-symbol,

.realm-placeholder[href$="/mental-health/"]
.realm-symbol {

    color: #81ffb9 !important;

    border-color:
        rgba(109, 255, 181, .75) !important;

    box-shadow:
        0 0 12px
        rgba(78, 255, 159, .55)
        !important;
}


.realm-placeholder[href$="/mental-health"]
.realm-label,

.realm-placeholder[href$="/mental-health/"]
.realm-label {

    color: #d9ffea !important;

    text-shadow:
        0 0 8px
        rgba(88, 255, 167, .60)
        !important;
}


.realm-placeholder[href$="/mental-health"]:hover,
.realm-placeholder[href$="/mental-health/"]:hover,
.realm-placeholder[href$="/mental-health"]:focus-visible,
.realm-placeholder[href$="/mental-health/"]:focus-visible {

    border-color:
        #8affbd !important;

    box-shadow:
        0 0 10px rgba(77, 255, 158, .95),
        0 0 24px rgba(77, 255, 158, .62),
        0 0 42px rgba(77, 255, 158, .32),
        inset 0 0 20px rgba(77, 255, 158, .22)
        !important;
}