/* ============================================================================
   SPCN Classic Blue Network Website Custom Style
   ----------------------------------------------------------------------------
   This file is loaded AFTER Site.css and main.css. Network owners can edit this
   file to change the website appearance without modifying the core stylesheet.

   IMPORTANT
   - Keep this file when installing future website updates.
   - Replace Content/images/network-logo.png to use a different network logo.
   - This preset keeps the modern website layout while recreating the classic SPCN two-tier blue header.
   - Search for "OPTIONAL" near the bottom for extra layout choices.
   - ThemeBuilder/index.html can visually edit and regenerate this file.
   ============================================================================ */

/* ============================================================================
   1. NETWORK-WIDE APPEARANCE
   Change the values in this section first.
   ============================================================================ */
:root {
    /* Page background */
    --network-page-bg-1: #f7f9fb;
    --network-page-bg-2: #eef3f7;
    --network-page-bg-3: #f8fafb;

    /* Cards, panels, header, and footer */
    --network-card-top: rgba(255, 255, 255, 0.94);
    --network-card-bottom: rgba(255, 255, 255, 0.82);
    --network-card-solid: #ffffff;
    --network-header-bg: #448cbf;
    --network-footer-bg: rgba(255, 255, 255, 0.72);

    /* Text and borders */
    --network-text: #111827;
    --network-muted: #5b6b82;
    --network-line: rgba(37, 56, 88, 0.10);
    --network-line-strong: rgba(37, 56, 88, 0.16);
    --network-soft: #eaf4fa;

    /* Corners */
    --network-radius: 24px;
    --network-radius-medium: 18px;
    --network-radius-small: 14px;
    --network-button-radius: 999px;

    /* Shadows */
    --network-shadow-small: 0 8px 24px rgba(15, 23, 42, 0.06);
    --network-shadow: 0 18px 55px rgba(15, 23, 42, 0.11);
    --network-shadow-large: 0 28px 80px rgba(15, 23, 42, 0.15);

    /* Typography */
    --network-body-font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --network-heading-font: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;

    /* Site width and background grid */
    --network-site-width: 1320px;
    --network-grid-size: 44px;
    --network-grid-opacity: 0.035;

    /* Header logo sizing */
    --network-logo-width: 150px;
    --network-logo-max-height: 54px;
}

/* Map the owner settings to the variables used throughout the core website. */
:root {
    --site-bg: var(--network-page-bg-2);
    --site-surface: var(--network-card-bottom);
    --site-surface-solid: var(--network-card-solid);
    --site-border: var(--network-line);
    --site-border-strong: var(--network-line-strong);
    --site-text: var(--network-text);
    --site-muted: var(--network-muted);
    --site-shadow: var(--network-shadow);
    --site-radius: var(--network-radius-medium);
    --site-radius-sm: var(--network-radius-small);

    --wx-bg-1: var(--network-page-bg-1);
    --wx-bg-2: var(--network-page-bg-2);
    --wx-card: var(--network-card-bottom);
    --wx-card-solid: var(--network-card-solid);
    --wx-text: var(--network-text);
    --wx-muted: var(--network-muted);
    --wx-soft: var(--network-soft);
    --wx-line: var(--network-line);
    --wx-line-strong: var(--network-line-strong);
    --wx-shadow-sm: var(--network-shadow-small);
    --wx-shadow: var(--network-shadow);
    --wx-shadow-lg: var(--network-shadow-large);
    --wx-radius: var(--network-radius);
    --wx-radius-md: var(--network-radius-medium);
    --wx-radius-sm: var(--network-radius-small);
}

/* ============================================================================
   2. APPLY THE NETWORK SETTINGS
   These rules make the values above affect the complete website.
   ============================================================================ */
html,
body {
    background:
        radial-gradient(circle at 10% 0%, rgba(var(--wx-accent-rgb), 0.13), transparent 32rem),
        radial-gradient(circle at 90% 8%, rgba(var(--wx-accent-2-rgb), 0.10), transparent 30rem),
        radial-gradient(circle at 48% 46%, rgba(var(--wx-accent-3-rgb), 0.08), transparent 35rem),
        linear-gradient(180deg, var(--network-page-bg-1), var(--network-page-bg-2) 58%, var(--network-page-bg-3));
    color: var(--network-text);
}

body {
    font-family: var(--network-body-font);
}

h1,
h2,
h3,
h4,
h5,
h6,
#headerlogo,
.sidebar-card__title {
    font-family: var(--network-heading-font);
}

body::before {
    background-image:
        linear-gradient(rgba(var(--wx-accent-rgb), var(--network-grid-opacity)) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--wx-accent-rgb), var(--network-grid-opacity)) 1px, transparent 1px);
    background-size: var(--network-grid-size) var(--network-grid-size);
}

.site-shell {
    width: min(var(--network-site-width), calc(100% - 2rem));
}

.site-header {
    background: var(--network-header-bg);
    border-bottom-color: var(--network-line);
}

.site-header::after {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(var(--wx-accent-rgb), 0.24),
        rgba(var(--wx-accent-2-rgb), 0.18),
        transparent
    );
}

.sidebar-card,
.home-hero-card,
.home-info-card,
.page-heading-card,
.page-panel,
.bgfade,
.table-responsive,
.modal-content {
    background: linear-gradient(180deg, var(--network-card-top), var(--network-card-bottom));
    border-color: var(--network-line);
    border-radius: var(--network-radius);
    box-shadow: var(--network-shadow-small);
}

.home-hero-card {
    box-shadow: var(--network-shadow);
}

.home-network-card {
    border-radius: var(--network-radius-medium);
}

.sidebar-link,
.form-control,
.form-select,
.regform_input,
.regform_select,
.regform_textarea,
input[type='text'],
input[type='email'],
input[type='password'],
input[type='search'],
textarea,
select {
    border-radius: var(--network-radius-small);
}

.btn,
a.btn,
.site-accent-trigger,
.site-navbar .nav-link {
    border-radius: var(--network-button-radius);
}

.footer-inner {
    background: var(--network-footer-bg);
    border-color: var(--network-line);
    box-shadow: var(--network-shadow-small);
}

/* ============================================================================
   3. VISITOR ACCENT COLORS
   The Theme menu remains enabled by default, so each visitor can choose blue,
   purple, teal, green, orange, or rose. Edit these palettes to offer different
   colors while retaining the visitor Theme menu.
   ============================================================================ */
html[data-wx-accent='blue'] {
    --site-primary: #2f86bd;
    --site-primary-2: #0e588e;
    --site-primary-rgb: 47, 134, 189;
    --site-primary-2-rgb: 14, 88, 142;
    --wx-accent: #2f86bd;
    --wx-accent-2: #0e588e;
    --wx-accent-3: #65b947;
    --wx-accent-rgb: 47, 134, 189;
    --wx-accent-2-rgb: 14, 88, 142;
    --wx-accent-3-rgb: 101, 185, 71;
    --wx-accent-shadow: rgba(14, 88, 142, 0.28);
}

html[data-wx-accent='purple'] {
    --site-primary: #7c3aed;
    --site-primary-2: #4f46e5;
    --site-primary-rgb: 124, 58, 237;
    --site-primary-2-rgb: 79, 70, 229;
    --wx-accent: #7c3aed;
    --wx-accent-2: #4f46e5;
    --wx-accent-3: #a855f7;
    --wx-accent-rgb: 124, 58, 237;
    --wx-accent-2-rgb: 79, 70, 229;
    --wx-accent-3-rgb: 168, 85, 247;
    --wx-accent-shadow: rgba(124, 58, 237, 0.26);
}

html[data-wx-accent='teal'] {
    --site-primary: #0f766e;
    --site-primary-2: #0891b2;
    --site-primary-rgb: 15, 118, 110;
    --site-primary-2-rgb: 8, 145, 178;
    --wx-accent: #0f766e;
    --wx-accent-2: #0891b2;
    --wx-accent-3: #14b8a6;
    --wx-accent-rgb: 15, 118, 110;
    --wx-accent-2-rgb: 8, 145, 178;
    --wx-accent-3-rgb: 20, 184, 166;
    --wx-accent-shadow: rgba(15, 118, 110, 0.25);
}

html[data-wx-accent='green'] {
    --site-primary: #16a34a;
    --site-primary-2: #15803d;
    --site-primary-rgb: 22, 163, 74;
    --site-primary-2-rgb: 21, 128, 61;
    --wx-accent: #16a34a;
    --wx-accent-2: #15803d;
    --wx-accent-3: #22c55e;
    --wx-accent-rgb: 22, 163, 74;
    --wx-accent-2-rgb: 21, 128, 61;
    --wx-accent-3-rgb: 34, 197, 94;
    --wx-accent-shadow: rgba(22, 163, 74, 0.24);
}

html[data-wx-accent='orange'] {
    --site-primary: #ea580c;
    --site-primary-2: #f97316;
    --site-primary-rgb: 234, 88, 12;
    --site-primary-2-rgb: 249, 115, 22;
    --wx-accent: #ea580c;
    --wx-accent-2: #f97316;
    --wx-accent-3: #fb923c;
    --wx-accent-rgb: 234, 88, 12;
    --wx-accent-2-rgb: 249, 115, 22;
    --wx-accent-3-rgb: 251, 146, 60;
    --wx-accent-shadow: rgba(234, 88, 12, 0.24);
}

html[data-wx-accent='rose'] {
    --site-primary: #e11d48;
    --site-primary-2: #be185d;
    --site-primary-rgb: 225, 29, 72;
    --site-primary-2-rgb: 190, 24, 93;
    --wx-accent: #e11d48;
    --wx-accent-2: #be185d;
    --wx-accent-3: #fb7185;
    --wx-accent-rgb: 225, 29, 72;
    --wx-accent-2-rgb: 190, 24, 93;
    --wx-accent-3-rgb: 251, 113, 133;
    --wx-accent-shadow: rgba(225, 29, 72, 0.24);
}

/* ============================================================================
   4. OPTIONAL: LOCK THE WEBSITE TO ONE NETWORK BRAND COLOR

   Remove the opening and closing comment marks around the code below. Change
   the HEX colors and matching RGB values. This also hides the visitor Theme
   menu because every visitor will use the network owner's colors.

html[data-wx-accent] {
    --site-primary: #2f80b7;
    --site-primary-2: #2563eb;
    --site-primary-rgb: 47, 128, 183;
    --site-primary-2-rgb: 37, 99, 235;
    --wx-accent: #2f80b7;
    --wx-accent-2: #2563eb;
    --wx-accent-3: #0ea5e9;
    --wx-accent-rgb: 47, 128, 183;
    --wx-accent-2-rgb: 37, 99, 235;
    --wx-accent-3-rgb: 14, 165, 233;
    --wx-accent-shadow: rgba(47, 128, 183, 0.26);
}

.site-accent-menu {
    display: none !important;
}
   ============================================================================ */

/* ============================================================================
   5. OPTIONAL: USE A NETWORK BACKGROUND IMAGE

   Upload an image as Content/images/network-background.jpg, then remove the
   comment marks around this code.

html,
body {
    background:
        linear-gradient(rgba(247, 251, 255, 0.90), rgba(237, 244, 255, 0.94)),
        url('images/network-background.jpg') center top / cover fixed no-repeat;
}
   ============================================================================ */

/* ============================================================================
   6. OPTIONAL: REMOVE THE DECORATIVE BACKGROUND GRID

body::before {
    display: none;
}
   ============================================================================ */

/* ============================================================================
   7. OPTIONAL: USE A SQUARER, FLATTER DESIGN

:root {
    --network-radius: 12px;
    --network-radius-medium: 10px;
    --network-radius-small: 8px;
    --network-button-radius: 8px;
    --network-shadow-small: 0 2px 8px rgba(15, 23, 42, 0.07);
    --network-shadow: 0 6px 20px rgba(15, 23, 42, 0.10);
    --network-shadow-large: 0 10px 30px rgba(15, 23, 42, 0.12);
}
   ============================================================================ */

/* Add advanced network-specific CSS below this line. */

/* ============================================================================
   8. SPCN CLASSIC TWO-TIER HEADER PRESET
   ----------------------------------------------------------------------------
   Colors sampled from the supplied SPCN website screenshot:
   top blue      #448cbf
   lower blue    #0e588e
   navigation    #053f69
   separator     #4d95c7

   Replace Content/images/network-logo.png with the network's full wordmark.
   A wide transparent PNG works best. The site title copy is hidden because the
   logo in the reference design already contains the network name.
   ============================================================================ */
:root {
    --spcn-header-top: #448cbf;
    --spcn-header-bottom: #0e588e;
    --spcn-nav-bg: #053f69;
    --spcn-nav-line: #4d95c7;
    --spcn-nav-text: #ffffff;
    --spcn-nav-hover: #c9ecff;
}

/* Keep the complete network on the SPCN blue/green brand palette. */
html[data-wx-accent] {
    --site-primary: #2f86bd;
    --site-primary-2: #0e588e;
    --site-primary-rgb: 47, 134, 189;
    --site-primary-2-rgb: 14, 88, 142;
    --wx-accent: #2f86bd;
    --wx-accent-2: #0e588e;
    --wx-accent-3: #65b947;
    --wx-accent-rgb: 47, 134, 189;
    --wx-accent-2-rgb: 14, 88, 142;
    --wx-accent-3-rgb: 101, 185, 71;
    --wx-accent-shadow: rgba(14, 88, 142, 0.28);
}

.site-header {
    position: relative;
    background: linear-gradient(
        180deg,
        var(--spcn-header-top) 0,
        var(--spcn-header-bottom) 72px,
        var(--spcn-nav-bg) 72px,
        var(--spcn-nav-bg) 100%
    );
    border: 0;
    box-shadow: 0 2px 8px rgba(3, 35, 58, 0.22);
    backdrop-filter: none;
}

.site-header::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 72px;
    right: 0;
    left: 0;
    height: 1px;
    background: rgba(77, 149, 199, 0.95);
}

.site-header::after {
    display: none;
}

.site-navbar,
.site-navbar-shell {
    position: relative;
    z-index: 1;
}

.site-brand {
    color: #ffffff;
}

.site-brand:hover,
.site-brand:focus {
    color: #ffffff;
}

.site-brand-mark {
    width: var(--network-logo-width);
    height: var(--network-logo-max-height);
    flex: 0 0 var(--network-logo-width);
    justify-content: flex-start;
}

.site-brand-logo {
    width: var(--network-logo-width);
    height: auto;
    max-height: var(--network-logo-max-height);
    object-fit: contain;
    object-position: left center;
    filter: drop-shadow(0 2px 3px rgba(0, 30, 54, 0.35));
}

/* The reference header uses a self-contained logo/wordmark. */
.site-brand-copy {
    display: none;
}

/* The classic header does not include the modern visitor Theme button. */
.site-accent-menu {
    display: none !important;
}

@media (min-width: 992px) {
    .site-navbar,
    .site-navbar-shell {
        min-height: 114px;
    }

    .site-navbar-shell {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: 72px 42px;
        align-items: center;
    }

    .site-brand {
        grid-column: 1 / -1;
        grid-row: 1;
        align-self: center;
        justify-self: start;
        height: 72px;
        padding: 0;
    }

    .site-nav-collapse {
        grid-column: 1 / -1;
        grid-row: 2;
        display: flex !important;
        align-items: center;
        min-width: 0;
        min-height: 42px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .site-main-nav,
    .site-user-nav {
        gap: 0 !important;
    }

    .site-navbar .nav-link,
    .site-user-nav .nav-link {
        display: inline-flex;
        align-items: center;
        min-height: 42px;
        padding: 0 1rem !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: var(--spcn-nav-text) !important;
        font-size: 0.9rem;
        font-weight: 500;
        text-shadow: 0 1px 1px rgba(0, 26, 46, 0.45);
        box-shadow: none !important;
        transform: none !important;
    }

    .site-navbar .nav-link:hover,
    .site-navbar .nav-link:focus,
    .site-user-nav .nav-link:hover,
    .site-user-nav .nav-link:focus {
        background: rgba(255, 255, 255, 0.075) !important;
        color: var(--spcn-nav-hover) !important;
        text-decoration: none;
    }

    .site-main-nav .nav-item:first-child .nav-link {
        padding-left: 0 !important;
        padding-right: 1.1rem !important;
    }

    .site-user-nav .nav-item:last-child .nav-link {
        padding-right: 0 !important;
        padding-left: 1.1rem !important;
    }
}

@media (max-width: 991.98px) {
    .site-header {
        background: linear-gradient(180deg, var(--spcn-header-top), var(--spcn-header-bottom));
    }

    .site-header::before {
        display: none;
    }

    .site-navbar,
    .site-navbar-shell {
        min-height: 72px;
    }

    .site-navbar-shell {
        display: flex !important;
        flex-wrap: wrap;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .site-brand {
        min-width: 0;
        max-width: calc(100% - 58px);
        padding: 0;
    }

    .site-brand-mark {
        width: min(var(--network-logo-width), 128px);
        height: 48px;
        flex-basis: min(var(--network-logo-width), 128px);
    }

    .site-brand-logo {
        width: min(var(--network-logo-width), 128px);
        max-height: 48px;
    }

    .site-nav-toggle {
        border: 1px solid rgba(255, 255, 255, 0.38) !important;
        background: rgba(5, 63, 105, 0.42) !important;
        box-shadow: none !important;
    }

    .site-nav-toggle .navbar-toggler-icon {
        filter: invert(1) brightness(2);
    }

    .site-nav-collapse {
        flex-basis: calc(100% + 1rem);
        width: calc(100% + 1rem);
        margin: 0.5rem -0.5rem -0.5rem;
        padding: 0.55rem;
        border: 0;
        border-top: 1px solid rgba(77, 149, 199, 0.95);
        border-radius: 0;
        background: var(--spcn-nav-bg);
        box-shadow: none;
    }

    .site-navbar .nav-link,
    .site-user-nav .nav-link {
        border: 0 !important;
        border-radius: 4px !important;
        background: transparent !important;
        color: var(--spcn-nav-text) !important;
        font-weight: 650;
        box-shadow: none !important;
        transform: none !important;
    }

    .site-navbar .nav-link:hover,
    .site-navbar .nav-link:focus,
    .site-user-nav .nav-link:hover,
    .site-user-nav .nav-link:focus {
        background: rgba(255, 255, 255, 0.09) !important;
        color: var(--spcn-nav-hover) !important;
    }
}

/* ============================================================================
   9. SPCN DISTINCTIVE IDENTITY PASS
   ----------------------------------------------------------------------------
   This section moves SPCN farther away from the standard IRCWX appearance
   while keeping the same accessible modern layout. Everything here remains
   inside network.custom.css.
   ============================================================================ */

:root {
    --spcn-navy: #053f69;
    --spcn-deep-blue: #0b5689;
    --spcn-blue: #2f86bd;
    --spcn-sky: #69a9ef;
    --spcn-green: #65b947;
    --spcn-yellow: #f4d43f;
    --spcn-coral: #ff655d;
    --spcn-fan-watermark: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNjAiIGhlaWdodD0iMTkwIiB2aWV3Qm94PSIwIDAgMjYwIDE5MCI+CjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQwIDE4KSIgb3BhY2l0eT0iLjE4Ij4KPGVsbGlwc2UgY3g9IjYyIiBjeT0iNjMiIHJ4PSIyOCIgcnk9IjY2IiB0cmFuc2Zvcm09InJvdGF0ZSgtNDIgNjIgNjMpIiBmaWxsPSIjNjViOTQ3Ii8+CjxlbGxpcHNlIGN4PSI5MiIgY3k9IjQ4IiByeD0iMjciIHJ5PSI2NiIgdHJhbnNmb3JtPSJyb3RhdGUoLTE4IDkyIDQ4KSIgZmlsbD0iI2Y0ZDQzZiIvPgo8ZWxsaXBzZSBjeD0iMTI0IiBjeT0iNDgiIHJ4PSIyNyIgcnk9IjY2IiB0cmFuc2Zvcm09InJvdGF0ZSgxOCAxMjQgNDgpIiBmaWxsPSIjZmY2NTVkIi8+CjxlbGxpcHNlIGN4PSIxNTQiIGN5PSI2MyIgcng9IjI4IiByeT0iNjYiIHRyYW5zZm9ybT0icm90YXRlKDQyIDE1NCA2MykiIGZpbGw9IiM2OWE5ZWYiLz4KPGVsbGlwc2UgY3g9IjEwOCIgY3k9IjEwOSIgcng9IjY1IiByeT0iMzAiIGZpbGw9IiNmZmZmZmYiIG9wYWNpdHk9Ii43OCIvPgo8L2c+Cjwvc3ZnPg==");
    --spcn-page-pattern: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5NiIgaGVpZ2h0PSI5NiIgdmlld0JveD0iMCAwIDk2IDk2Ij4KPGcgb3BhY2l0eT0iLjEyIj4KPGNpcmNsZSBjeD0iMTUiIGN5PSIxNyIgcj0iMi4yIiBmaWxsPSIjMmY4NmJkIi8+CjxjaXJjbGUgY3g9Ijc4IiBjeT0iNjkiIHI9IjIiIGZpbGw9IiM2NWI5NDciLz4KPHBhdGggZD0iTTUxIDMxYzYtNyAxMi03IDE4IDBNNTQgMzdjNC00IDgtNCAxMiAwIiBmaWxsPSJub25lIiBzdHJva2U9IiMwZTU4OGUiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPHBhdGggZD0iTTI1IDY3YzQtNSA4LTUgMTIgME0yOCA3MmMyLTIgNC0yIDYgMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjViOTQ3IiBzdHJva2Utd2lkdGg9IjEuMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CjwvZz4KPC9zdmc+");

    /* A slightly more structured personality than the rounded IRCWX default. */
    --network-radius: 18px;
    --network-radius-medium: 14px;
    --network-radius-small: 10px;
    --network-button-radius: 9px;
    --network-shadow-small: 0 8px 22px rgba(5, 63, 105, 0.08);
    --network-shadow: 0 18px 46px rgba(5, 63, 105, 0.14);
    --network-shadow-large: 0 26px 65px rgba(5, 63, 105, 0.18);
}

/* Replace the generic square grid with a very subtle chat-inspired pattern. */
body::before {
    display: block;
    background-image: var(--spcn-page-pattern);
    background-size: 96px 96px;
    opacity: 0.7;
}

/* Global card structure used across public, account, and management pages. */
.page-heading-card,
.page-panel,
.bgfade,
.table-responsive,
.modal-content {
    border-radius: var(--network-radius-medium);
    border-color: rgba(5, 63, 105, 0.13);
}

.page-heading-card {
    position: relative;
    overflow: hidden;
    border-top: 4px solid var(--spcn-blue);
}

.page-heading-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 180px;
    height: 100%;
    pointer-events: none;
    background: var(--spcn-fan-watermark) right -45px center / 150px auto no-repeat;
    opacity: 0.28;
}

/* --------------------------------------------------------------------------
   HOME HERO
   -------------------------------------------------------------------------- */
.home-hero-card {
    border: 1px solid rgba(5, 63, 105, 0.13);
    border-left: 5px solid var(--spcn-blue);
    border-radius: var(--network-radius);
    box-shadow: var(--network-shadow);
}

.home-hero-card::before {
    background:
        var(--spcn-fan-watermark) right 29% center / 235px auto no-repeat,
        linear-gradient(
            90deg,
            var(--spcn-green) 0 25%,
            var(--spcn-yellow) 25% 50%,
            var(--spcn-coral) 50% 75%,
            var(--spcn-sky) 75% 100%
        ) top / 100% 4px no-repeat,
        radial-gradient(circle at 7% 18%, rgba(47, 134, 189, 0.17), transparent 24rem),
        radial-gradient(circle at 67% 82%, rgba(101, 185, 71, 0.10), transparent 20rem),
        linear-gradient(135deg, rgba(255,255,255,0.94), rgba(244,250,253,0.72));
}

.home-hero-card h1 {
    color: #0b1f38;
    text-shadow: 0 1px 0 rgba(255,255,255,0.8);
}

.home-hero-card__lead {
    color: #34475f;
}

.site-eyebrow,
.eyebrow {
    color: var(--spcn-deep-blue);
    background: linear-gradient(135deg, rgba(47,134,189,0.12), rgba(101,185,71,0.10));
    border: 1px solid rgba(47,134,189,0.10);
}

.site-eyebrow::before {
    background: var(--spcn-green);
    box-shadow: 0 0 0 4px rgba(101,185,71,0.16), 0 0 13px rgba(101,185,71,0.35);
}

/* SPCN buttons: structured corners, blue depth, and a green brand edge. */
.btn-primary,
a.btn-primary,
.sidebar-link--primary {
    border-color: rgba(4, 54, 91, 0.30) !important;
    background: linear-gradient(135deg, #3291c7, #0b5d93) !important;
    box-shadow:
        inset 0 -3px 0 rgba(101,185,71,0.72),
        0 10px 22px rgba(5,63,105,0.20) !important;
}

.btn-primary:hover,
.btn-primary:focus,
a.btn-primary:hover,
a.btn-primary:focus,
.sidebar-link--primary:hover,
.sidebar-link--primary:focus {
    background: linear-gradient(135deg, #3ca0d7, #0d6ca7) !important;
    box-shadow:
        inset 0 -3px 0 rgba(101,185,71,0.92),
        0 13px 26px rgba(5,63,105,0.26) !important;
    transform: translateY(-1px);
}

.btn-soft,
a.btn-soft {
    color: var(--spcn-deep-blue) !important;
    border-color: rgba(14,88,142,0.20);
    background: linear-gradient(180deg, rgba(235,247,253,0.96), rgba(220,239,248,0.88));
}

.btn-soft:hover,
.btn-soft:focus,
a.btn-soft:hover,
a.btn-soft:focus {
    color: var(--spcn-navy) !important;
    border-color: rgba(101,185,71,0.42);
    background: rgba(101,185,71,0.12);
}

/* --------------------------------------------------------------------------
   ONLINE ACTIVITY PANEL
   -------------------------------------------------------------------------- */
.home-network-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(139, 207, 244, 0.34);
    border-radius: var(--network-radius-medium);
    background:
        var(--spcn-fan-watermark) right -48px bottom -26px / 190px auto no-repeat,
        radial-gradient(circle at 12% 0%, rgba(105,169,239,0.42), transparent 45%),
        linear-gradient(145deg, #0b6097, #053f69 72%);
    box-shadow: 0 20px 42px rgba(5,63,105,0.28);
}

.home-network-card::before {
    content: "";
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    width: 0.58rem;
    height: 0.58rem;
    border-radius: 50%;
    background: var(--spcn-green);
    box-shadow: 0 0 0 5px rgba(101,185,71,0.15), 0 0 14px rgba(101,185,71,0.72);
}

.home-network-card > * {
    position: relative;
    z-index: 1;
}

.home-network-card__label {
    color: #d9f1ff;
}

.home-network-card__stats > div {
    border-radius: 11px;
    border-color: rgba(255,255,255,0.18);
    background: linear-gradient(135deg, rgba(255,255,255,0.17), rgba(255,255,255,0.09));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.home-network-card strong {
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0,25,45,0.28);
}

.home-network-card span {
    color: #d7edfa;
}

/* --------------------------------------------------------------------------
   SIDEBAR
   -------------------------------------------------------------------------- */
.sidebar-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(5,63,105,0.12);
    border-left: 4px solid var(--spcn-blue);
    border-radius: var(--network-radius-medium);
    background: linear-gradient(180deg, rgba(255,255,255,0.97), rgba(247,251,253,0.90));
}

.sidebar-card::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 92px;
    height: 54px;
    pointer-events: none;
    background: var(--spcn-fan-watermark) right -31px top -24px / 96px auto no-repeat;
    opacity: 0.24;
}

.sidebar-card__header,
.chatcats-modern {
    position: relative;
    z-index: 1;
}

.sidebar-card__title {
    color: var(--spcn-navy);
}

.sidebar-card__title::after {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    margin-top: 0.32rem;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        var(--spcn-green) 0 25%,
        var(--spcn-yellow) 25% 50%,
        var(--spcn-coral) 50% 75%,
        var(--spcn-sky) 75% 100%
    );
}

.sidebar-card__badge {
    color: var(--spcn-deep-blue);
    border: 1px solid rgba(47,134,189,0.12);
    background: rgba(47,134,189,0.09);
}

.sidebar-link {
    border-radius: var(--network-radius-small);
    color: #21344d !important;
}

.sidebar-link__icon {
    color: #3f8f34;
    border-radius: 8px;
    background: rgba(101,185,71,0.13);
}

.sidebar-link:hover,
.sidebar-link:focus {
    color: #ffffff !important;
    background: linear-gradient(135deg, #1978ad, #0b5689);
    box-shadow: 0 8px 18px rgba(5,63,105,0.15);
}

.sidebar-link:hover .sidebar-link__icon,
.sidebar-link:focus .sidebar-link__icon {
    color: #ffffff;
    background: var(--spcn-green);
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   HOME INFORMATION CARDS
   -------------------------------------------------------------------------- */
.home-info-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--network-radius-medium);
    border-color: rgba(5,63,105,0.11);
    border-top: 4px solid var(--spcn-blue);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.home-info-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(5,63,105,0.12);
}

.home-info-grid > .home-info-card:nth-child(2) {
    border-top-color: var(--spcn-coral);
}

.home-info-grid > .home-info-card:nth-child(3) {
    border-top-color: var(--spcn-green);
}

.home-info-card__icon {
    border-radius: 10px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--spcn-blue), var(--spcn-deep-blue));
    box-shadow: 0 9px 19px rgba(5,63,105,0.17);
}

.home-info-grid > .home-info-card:nth-child(2) .home-info-card__icon {
    background: linear-gradient(135deg, #ff8b62, var(--spcn-coral));
    box-shadow: 0 9px 19px rgba(255,101,93,0.18);
}

.home-info-grid > .home-info-card:nth-child(3) .home-info-card__icon {
    background: linear-gradient(135deg, #7acb58, #438f35);
    box-shadow: 0 9px 19px rgba(101,185,71,0.20);
}

.home-info-card .mainheaders {
    color: #102a46;
}

.home-text-link {
    color: var(--spcn-deep-blue) !important;
}

.home-text-link:hover,
.home-text-link:focus {
    color: #3f8f34 !important;
}

/* --------------------------------------------------------------------------
   NAVIGATION AND FOOTER
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .site-navbar .nav-link,
    .site-user-nav .nav-link {
        position: relative;
    }

    .site-navbar .nav-link::after,
    .site-user-nav .nav-link::after {
        content: "";
        position: absolute;
        right: 1rem;
        bottom: 6px;
        left: 1rem;
        height: 2px;
        border-radius: 999px;
        background: var(--spcn-green);
        opacity: 0;
        transform: scaleX(0.35);
        transition: opacity 0.18s ease, transform 0.18s ease;
    }

    .site-navbar .nav-link:hover::after,
    .site-navbar .nav-link:focus::after,
    .site-user-nav .nav-link:hover::after,
    .site-user-nav .nav-link:focus::after {
        opacity: 1;
        transform: scaleX(1);
    }
}

.site-footer {
    color: #d8eaf6;
}

.footer-inner {
    position: relative;
    overflow: hidden;
    color: #d8eaf6;
    border: 1px solid rgba(105,169,239,0.22);
    border-radius: var(--network-radius-medium);
    background:
        var(--spcn-fan-watermark) right -50px center / 170px auto no-repeat,
        linear-gradient(135deg, #06456f, #032f50);
    box-shadow: 0 14px 30px rgba(5,63,105,0.18);
    backdrop-filter: none;
}

.footer-inner::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(
        90deg,
        var(--spcn-green) 0 25%,
        var(--spcn-yellow) 25% 50%,
        var(--spcn-coral) 50% 75%,
        var(--spcn-sky) 75% 100%
    );
}

.footer-inner > * {
    position: relative;
    z-index: 1;
}

.footer-inner a {
    color: #8fd4fb !important;
}

.footer-inner a:hover,
.footer-inner a:focus {
    color: #a9df70 !important;
}

.footer-credits span + span::before,
.footer-separator {
    color: rgba(216,234,246,0.48);
}

@media (max-width: 767.98px) {
    .home-hero-card {
        border-left-width: 1px;
        border-top: 5px solid var(--spcn-blue);
    }

    .home-hero-card::before {
        background:
            linear-gradient(
                90deg,
                var(--spcn-green) 0 25%,
                var(--spcn-yellow) 25% 50%,
                var(--spcn-coral) 50% 75%,
                var(--spcn-sky) 75% 100%
            ) top / 100% 4px no-repeat,
            radial-gradient(circle at 8% 15%, rgba(47,134,189,0.15), transparent 19rem),
            linear-gradient(135deg, rgba(255,255,255,0.96), rgba(244,250,253,0.80));
    }

    .footer-inner {
        text-align: center;
        justify-content: center;
    }

    .footer-credits {
        justify-content: center;
    }
}

/* ============================================================================
   10. SPCN FINAL HEADER, NAVBAR, AND PRIMARY SIDEBAR BUTTON
   ----------------------------------------------------------------------------
   Resets Bootstrap 3 navbar behavior that was interfering with the custom
   two-tier header. The logo row is 72px, the navigation row is 44px, and all
   links are centered with equal space above and below.
   ============================================================================ */

:root {
    --network-logo-width: 190px;
    --network-logo-max-height: 62px;
}

/* Keep the primary sidebar button readable over its blue background. */
.sidebar-link--primary,
.sidebar-link--primary:visited,
.sidebar-link--primary .sidebar-link__label,
.sidebar-link--primary .sidebar-link__text {
    color: #ffffff !important;
}

.sidebar-link--primary .sidebar-link__icon {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.18);
}

.sidebar-link--primary:hover,
.sidebar-link--primary:focus,
.sidebar-link--primary:hover .sidebar-link__label,
.sidebar-link--primary:focus .sidebar-link__label,
.sidebar-link--primary:hover .sidebar-link__text,
.sidebar-link--primary:focus .sidebar-link__text {
    color: #ffffff !important;
}

@media (min-width: 992px) {
    .site-header {
        min-height: 116px;
        overflow: visible !important;
        background: linear-gradient(
            180deg,
            var(--spcn-header-top) 0,
            var(--spcn-header-bottom) 72px,
            var(--spcn-nav-bg) 72px,
            var(--spcn-nav-bg) 100%
        );
    }

    .site-header::before {
        top: 72px;
    }

    /* Remove Bootstrap 3 clearfix and default spacing from the navbar. */
    .site-navbar {
        width: 100%;
        height: 116px;
        min-height: 116px;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        overflow: visible !important;
    }

    .site-navbar::before,
    .site-navbar::after,
    .site-nav-collapse::before,
    .site-nav-collapse::after {
        display: none !important;
        content: none !important;
    }

    .site-navbar-shell {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 72px 44px;
        width: min(var(--network-site-width), calc(100% - 2rem));
        height: 116px;
        min-height: 116px;
        margin: 0 auto;
        padding: 0 !important;
        gap: 0 !important;
        align-items: stretch;
        overflow: visible !important;
    }

    .site-brand {
        grid-column: 1;
        grid-row: 1;
        align-self: center;
        justify-self: start;
        display: flex;
        align-items: center;
        width: auto;
        height: 72px;
        min-height: 72px;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        line-height: 1;
        overflow: visible;
    }

    .site-brand-mark {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: var(--network-logo-width);
        height: var(--network-logo-max-height);
        flex: 0 0 var(--network-logo-width);
    }

    .site-brand-logo {
        display: block;
        width: var(--network-logo-width);
        height: auto;
        max-height: var(--network-logo-max-height);
    }

    /* The explicit .collapse selector defeats Bootstrap 3's height:auto!important. */
    .site-nav-collapse,
    .site-nav-collapse.collapse {
        grid-column: 1;
        grid-row: 2;
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        height: 44px !important;
        min-height: 44px;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0;
        background: transparent;
        box-shadow: none !important;
        overflow: visible !important;
    }

    .site-main-nav,
    .site-user-nav {
        display: flex !important;
        align-items: stretch !important;
        height: 44px;
        min-height: 44px;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        float: none !important;
        gap: 0 !important;
    }

    .site-main-nav {
        margin-right: auto !important;
        margin-left: 0 !important;
    }

    .site-user-nav {
        margin-right: 0 !important;
        margin-left: auto !important;
    }

    .site-main-nav > li,
    .site-user-nav > li {
        display: flex !important;
        align-items: stretch !important;
        height: 44px;
        min-height: 44px;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
    }

    .site-navbar .nav-link,
    .site-user-nav .nav-link {
        display: flex !important;
        align-items: center !important;
        justify-content: center;
        height: 44px !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 0 1rem !important;
        line-height: 1 !important;
        white-space: nowrap;
        overflow: visible !important;
    }

    .site-navbar .nav-link::after,
    .site-user-nav .nav-link::after {
        bottom: 4px;
    }

    .site-main-nav .nav-item:first-child .nav-link {
        padding-left: 0 !important;
        padding-right: 1.1rem !important;
    }

    .site-user-nav .nav-item:last-child .nav-link {
        padding-right: 0 !important;
        padding-left: 1.1rem !important;
    }
}

@media (max-width: 991.98px) {
    :root {
        --network-logo-width: 160px;
        --network-logo-max-height: 54px;
    }

    .site-brand-mark {
        width: min(var(--network-logo-width), 150px);
        height: 54px;
        flex-basis: min(var(--network-logo-width), 150px);
    }

    .site-brand-logo {
        width: min(var(--network-logo-width), 150px);
        max-height: 54px;
    }
}