/* ============================================================================
   REBRAND — WORKING Custom CSS for status.belden.io
   Iterate here, then paste into Statuspage admin > Custom CSS > Publish changes.
   The live/published baseline is preserved in customcss.original.css (revert
   anytime by pasting that back).

   Structure of this file:
     1. Belden brand tokens (reference values — CSS custom properties)
     2. Fonts (unchanged from original; Belden "Source Sans Pro")
     3. Typography application
     4. Subscribe dropdown (hide Atom/Teams/Slack — unchanged from original)
     5. REBRAND additions (status banner, component groups, spacing)

   NOTE: Statuspage injects this AFTER its main stylesheet, so these rules
   override defaults. Only Custom CSS/HTML on the custom domain renders live.
   Changes here are purely visual and fully reversible.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. BELDEN BRAND TOKENS
   Adjust these to match the official Belden brand palette. Values below are
   placeholders derived from the existing green status bar / Belden blue logo
   and MUST be confirmed against Belden brand guidelines before publishing.
   ---------------------------------------------------------------------------- */
:root {
    --belden-blue:        #004b87;  /* TODO: confirm exact Belden primary blue */
    --belden-blue-dark:   #00325a;  /* TODO: confirm */
    --belden-green:       #2e8b57;  /* operational (approx. current bar green) */
    --belden-yellow:      #e8a33d;  /* degraded / minor */
    --belden-orange:      #d9822b;  /* partial outage */
    --belden-red:         #c0392b;  /* major outage */
    --belden-text:        #1b1b1b;
    --belden-border:      #e3e6ea;
}

/* ----------------------------------------------------------------------------
   2. FONTS — Belden "Source Sans Pro" (unchanged from original)
   ---------------------------------------------------------------------------- */
/* source-sans-pro-300 - latin */
@font-face {
	font-family: "Source Sans Pro";
	font-style: normal;
	font-weight: 300;
	src: local(""), url("https://belden.io/webclient/assets/fonts/source-sans-pro-v18-latin-300.woff2") format("woff2"),
		url("https://belden.io/webclient/assets/fonts/source-sans-pro-v18-latin-300.woff") format("woff");
}
/* source-sans-pro-300italic - latin */
@font-face {
	font-family: "Source Sans Pro";
	font-style: italic;
	font-weight: 300;
	src: local(""), url("https://belden.io/webclient/assets/fonts/source-sans-pro-v18-latin-300italic.woff2") format("woff2"),
		url("https://belden.io/webclient/assets/fonts/source-sans-pro-v18-latin-300italic.woff") format("woff");
}
/* source-sans-pro-regular - latin */
@font-face {
	font-family: "Source Sans Pro";
	font-style: normal;
	font-weight: 400;
	src: local(""), url("https://belden.io/webclient/assets/fonts/source-sans-pro-v18-latin-regular.woff2") format("woff2"),
		url("https://belden.io/webclient/assets/fonts/source-sans-pro-v18-latin-regular.woff") format("woff");
}
/* source-sans-pro-italic - latin */
@font-face {
	font-family: "Source Sans Pro";
	font-style: italic;
	font-weight: 400;
	src: local(""), url("https://belden.io/webclient/assets/fonts/source-sans-pro-v18-latin-italic.woff2") format("woff2"),
		url("https://belden.io/webclient/assets/fonts/source-sans-pro-v18-latin-italic.woff") format("woff");
}
/* source-sans-pro-600 - latin */
@font-face {
	font-family: "Source Sans Pro";
	font-style: normal;
	font-weight: 600;
	src: local(""), url("https://belden.io/webclient/assets/fonts/source-sans-pro-v18-latin-600.woff2") format("woff2"),
		url("https://belden.io/webclient/assets/fonts/source-sans-pro-v18-latin-600.woff") format("woff");
}
/* source-sans-pro-600italic - latin */
@font-face {
	font-family: "Source Sans Pro";
	font-style: italic;
	font-weight: 600;
	src: local(""), url("https://belden.io/webclient/assets/fonts/source-sans-pro-v18-latin-600italic.woff2") format("woff2"),
		url("https://belden.io/webclient/assets/fonts/source-sans-pro-v18-latin-600italic.woff") format("woff");
}
/* source-sans-pro-700 - latin */
@font-face {
	font-family: "Source Sans Pro";
	font-style: normal;
	font-weight: 700;
	src: local(""), url("https://belden.io/webclient/assets/fonts/source-sans-pro-v18-latin-700.woff2") format("woff2"),
		url("https://belden.io/webclient/assets/fonts/source-sans-pro-v18-latin-700.woff") format("woff");
}
/* source-sans-pro-700italic - latin */
@font-face {
	font-family: "Source Sans Pro";
	font-style: italic;
	font-weight: 700;
	src: local(""), url("https://belden.io/webclient/assets/fonts/source-sans-pro-v18-latin-700italic.woff2") format("woff2"),
		url("https://belden.io/webclient/assets/fonts/source-sans-pro-v18-latin-700italic.woff") format("woff");
}

/* ----------------------------------------------------------------------------
   3. TYPOGRAPHY APPLICATION  (fixed invalid `//` comments -> `/* *\/`)
   ---------------------------------------------------------------------------- */
/* the default font-size classes used on the page */
.font-regular { font-family: "Source Sans Pro"; }
.font-large   { font-family: "Source Sans Pro"; }
.font-largest { font-family: "Source Sans Pro"; }

/* ----------------------------------------------------------------------------
   4. SUBSCRIBE DROPDOWN — hide Atom / Teams / Slack (unchanged from original)
   ---------------------------------------------------------------------------- */
.updates-dropdown-container #updates-dropdown-atom-btn,
.updates-dropdown-container #updates-dropdown-teams-btn,
.updates-dropdown-container #updates-dropdown-slack-btn { display: none; }

/* ============================================================================
   5. REBRAND ADDITIONS  (new — safe, additive, reversible)
   These are a conservative first pass. Statuspage class names can vary by
   theme; verify each selector against the live DOM and tune before publishing.
   ============================================================================ */

/* 5a. Subscribe button -> Belden blue (currently the default blue in screenshot) */
.btn-default.subscribe-btn,
.layout-content .subscribe-btn {
    background-color: var(--belden-blue);
    border-color: var(--belden-blue);
    color: #fff;
}
.btn-default.subscribe-btn:hover,
.layout-content .subscribe-btn:hover {
    background-color: var(--belden-blue-dark);
    border-color: var(--belden-blue-dark);
}

/* 5b. Overall status banner — keep green when operational, but Belden-tuned */
.page-status.status-none {
    background-color: var(--belden-green);
}
.page-status.status-minor    { background-color: var(--belden-yellow); }
.page-status.status-major    { background-color: var(--belden-orange); }
.page-status.status-critical { background-color: var(--belden-red); }

/* 5c. Component group headers — give Console / Platform groups a clear band.
   (Relevant once component groups are introduced for the Console + Platform
   split; harmless before that.) */
.component-container .component-inner-container.status-group,
.components-section .component-group .name {
    font-weight: 600;
    color: var(--belden-blue);
}

/* 5d. Component rows — a little more breathing room + subtle separators */
.component-container .component-inner-container {
    border-bottom: 1px solid var(--belden-border);
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}

/* 5e. "Operational" status label color consistency */
.component-status { color: var(--belden-green); }

/* 5f. Container width — slightly wider for a two-product (Console+Platform) page.
   Statuspage default is max-width 850px; nudge up for the denser layout. */
.container { max-width: 960px; }