/* ================================================================
   EPICORE WEBSITE HQ THEME R2
   Reference: Epicore HQ / Sales Workspace
   ================================================================ */

:root {
    --ep-bg: #03111d;
    --ep-bg2: #061725;
    --ep-header: #02101b;
    --ep-panel: #0b263a;
    --ep-panel2: #0d2d45;
    --ep-border: #14577c;
    --ep-border-strong: #1577a5;

    --ep-cyan: #10a8d8;
    --ep-cyan-bright: #24b9e9;
    --ep-cyan-text: #6ecaf3;

    --ep-gold: #a97916;
    --ep-gold2: #b8871d;
    --ep-gold-border: #c49326;

    --ep-white: #f4f7fa;
    --ep-muted: #9eb6c8;

    --ep-success: #0a3c2a;
    --ep-success-border: #19885c;
    --ep-danger: #781d34;
    --ep-danger-border: #9e2b47;
}

html,
body {
    background: var(--ep-bg) !important;
    color: var(--ep-white) !important;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif !important;
}

body {
    margin: 0 !important;
    min-height: 100vh !important;
    line-height: 1.5 !important;
}

/* HEADER ------------------------------------------------------- */

header,
.site-header,
.app-header,
.topbar,
.top-bar,
.navbar,
nav.site-nav {
    background: var(--ep-header) !important;
    border-bottom: 1px solid #133a54 !important;
    box-shadow: none !important;
}

header a,
.site-header a,
nav a {
    color: var(--ep-muted) !important;
    text-decoration: none !important;
}

header a:hover,
.site-header a:hover,
nav a:hover {
    color: var(--ep-white) !important;
}

/* STANDARD EPICORE HEADER BRAND ------------------------------- */

.epicore-r2-brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: 14px !important;
    text-decoration: none !important;
    min-width: 0 !important;
}

.epicore-r2-brand-logo {
    width: 52px !important;
    height: 52px !important;
    flex: 0 0 52px !important;
    display: block !important;
    object-fit: contain !important;
}

.epicore-r2-brand-copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 7px !important;
    min-width: 0 !important;
}

.epicore-r2-brand-name {
    color: var(--ep-white) !important;
    font-family: "Segoe UI", Arial, sans-serif !important;
    font-size: 30px !important;
    line-height: 1 !important;
    font-weight: 750 !important;
    letter-spacing: -.02em !important;
    text-transform: none !important;
    white-space: nowrap !important;
}

.epicore-r2-brand-slogan {
    color: var(--ep-cyan-bright) !important;
    font-family: "Segoe UI", Arial, sans-serif !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
    font-weight: 760 !important;
    letter-spacing: .055em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

/* HERO / MAJOR SECTIONS --------------------------------------- */

.hero,
.hero-section,
.banner,
.masthead,
.intro {
    background:
        radial-gradient(circle at 88% 0%, rgba(16,168,216,.10), transparent 36%),
        linear-gradient(135deg, #071c2b, #0b2b40) !important;
    color: var(--ep-white) !important;
}

main,
.page,
.page-shell,
.content,
.site-content {
    color: var(--ep-white) !important;
}

/* TYPOGRAPHY --------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--ep-white) !important;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif !important;
}

h1 {
    font-weight: 730 !important;
    letter-spacing: -.025em !important;
}

h2,
h3 {
    font-weight: 700 !important;
}

p,
.lead,
.subtitle,
.description,
.muted,
.help,
.note,
small {
    color: var(--ep-muted) !important;
}

/* IMPORTANT: NO ORANGE/GOLD TEXT */
.eyebrow,
.kicker,
.overline,
.section-label,
.tagline,
.slogan {
    color: var(--ep-cyan-bright) !important;
    font-weight: 760 !important;
    letter-spacing: .10em !important;
    text-transform: uppercase !important;
}

/* Hide duplicate hero slogan once it exists in the header. */
.epicore-r2-hide-duplicate-slogan {
    display: none !important;
}

/* PANELS ------------------------------------------------------- */

.card,
.panel,
.tile,
.box,
.feature-card,
.pricing-card,
.portal-card,
.download-card,
.support-card,
.login-card,
.form-card,
.stat-card {
    background: var(--ep-panel) !important;
    border: 1px solid var(--ep-border) !important;
    color: var(--ep-white) !important;
    box-shadow: none !important;
}

.card:hover,
.feature-card:hover,
.pricing-card:hover,
.portal-card:hover {
    border-color: var(--ep-border-strong) !important;
}

/* BUTTONS ------------------------------------------------------ */

button,
.btn,
.button,
a.btn,
a.button,
input[type="submit"],
input[type="button"] {
    border-radius: 12px !important;
    border: 1px solid var(--ep-border) !important;
    background: var(--ep-panel2) !important;
    color: var(--ep-white) !important;
    font-family: "Segoe UI", Arial, sans-serif !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    text-transform: none !important;
}

button:hover,
.btn:hover,
.button:hover,
a.btn:hover,
a.button:hover {
    border-color: var(--ep-cyan) !important;
    background: #103754 !important;
}

.epicore-r2-cyan-action {
    background: var(--ep-cyan) !important;
    border-color: var(--ep-cyan-bright) !important;
    color: #00131e !important;
}

.epicore-r2-cyan-action:hover {
    background: var(--ep-cyan-bright) !important;
}

.epicore-r2-gold-action {
    background: linear-gradient(180deg, var(--ep-gold2), var(--ep-gold)) !important;
    border-color: var(--ep-gold-border) !important;
    color: var(--ep-white) !important;
}

.epicore-r2-gold-action:hover {
    background: #b98b22 !important;
}

/* FORMS -------------------------------------------------------- */

input,
select,
textarea {
    background: #061b2b !important;
    border: 1px solid var(--ep-border) !important;
    color: var(--ep-white) !important;
    box-shadow: none !important;
}

input::placeholder,
textarea::placeholder {
    color: #718da1 !important;
}

input:focus,
select:focus,
textarea:focus {
    outline: none !important;
    border-color: var(--ep-cyan) !important;
    box-shadow: 0 0 0 2px rgba(16,168,216,.14) !important;
}

label {
    color: var(--ep-white) !important;
}

/* TABLES ------------------------------------------------------- */

table {
    color: var(--ep-white) !important;
    background: transparent !important;
}

thead,
th {
    color: var(--ep-cyan-text) !important;
    background: #09243a !important;
}

td,
th {
    border-color: #123f5c !important;
}

/* STATUS ------------------------------------------------------- */

.badge,
.pill,
.status,
.tag {
    border-radius: 999px !important;
    background: #0b3650 !important;
    border: 1px solid var(--ep-border) !important;
    color: var(--ep-white) !important;
}

.success,
.status-success {
    background: var(--ep-success) !important;
    border-color: var(--ep-success-border) !important;
}

.error,
.danger,
.status-danger {
    background: var(--ep-danger) !important;
    border-color: var(--ep-danger-border) !important;
}

/* FOOTER ------------------------------------------------------- */

footer,
.site-footer {
    background: var(--ep-header) !important;
    color: var(--ep-muted) !important;
    border-top: 1px solid #133a54 !important;
}

footer a,
.site-footer a {
    color: var(--ep-cyan-text) !important;
}

/* RESPONSIVE --------------------------------------------------- */

@media(max-width:760px) {
    .epicore-r2-brand {
        gap: 10px !important;
    }

    .epicore-r2-brand-logo {
        width: 42px !important;
        height: 42px !important;
        flex-basis: 42px !important;
    }

    .epicore-r2-brand-name {
        font-size: 24px !important;
    }

    .epicore-r2-brand-slogan {
        font-size: 10px !important;
        letter-spacing: .035em !important;
        white-space: normal !important;
    }
}