/* ============================================================================
   ircWx 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.
   - The defaults below preserve the standard ircWx website appearance.
   - 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: #f7fbff;
    --network-page-bg-2: #edf4ff;
    --network-page-bg-3: #f8fbff;

    /* 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: rgba(248, 251, 255, 0.78);
    --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: #eef4ff;

    /* 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;
}

/* 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: #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);
}

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. */