/**
 * File: wwwroot/css/navbar-themes.css
 * Purpose: Career-specific navbar theming using root color variables
 * Last Updated: 2025-01-02
 * Author: Jessie Martin
 * 
 * Academy Color Schemes:
 * - GSP: Blue/Grey/Orange (Georgia State Patrol)
 * - CVE: Black/Gold (Commercial Vehicle Enforcement)
 * - Capitol: Grey/White (Capitol Police)
 */

/**
 * ============================================
 * 1. CSS VARIABLES - DPS OFFICIAL COLOR SCHEME
 * ============================================
 * 
 * Official DPS Colors (2025):
 * These colors are extracted from official DPS badges and branding materials.
 * 
 * Color Palette:
 * - Navy: #11294B (Dark navy blue - backgrounds)
 * - Blue: #1F419B (Royal blue - primary brand)
 * - Orange: #DB4F30 (Burnt orange - GSP accent)
 * - Red: #A22237 (Burgundy - CTAs and urgency)
 * - Yellow: #EADC75 (Cream/pale yellow - CVE accent)
 * - Grey: #D7D5CF (Warm light grey - borders, subtle backgrounds)
 * - Black: #000000 (CVE primary)
 * - White: #FFFFFF (Text and backgrounds)
 */

:root {
	/* ========================================
	   OFFICIAL DPS CORE COLORS (2025)
	   ======================================== */
	--dps-white: #FFFFFF;
	--dps-navy: #11294B; /* Dark navy blue */
	--dps-blue: #1F419B; /* Royal blue (primary brand) */
	--dps-orange: #DB4F30; /* Burnt orange (GSP accent) */
	--dps-red: #A22237; /* Burgundy red (CTAs) */
	--dps-grey: #D7D5CF; /* Warm light grey */
	--dps-black: #000000; /* Pure black (CVE primary) */
	--dps-yellow: #EADC75; /* Cream/pale yellow (CVE accent) */
	/* ========================================
	   BACKWARDS COMPATIBILITY ALIASES
	   These map old variable names to new colors
	   so existing CSS doesn't break
	   ======================================== */
	--dps-royal-blue: var(--dps-blue); /* Alias for --dps-blue */
	--dps-blue-dark: var(--dps-navy); /* Alias for --dps-navy */
	--dps-gold: var(--dps-orange); /* Alias for --dps-orange */
	--dps-dark-gold: #B8401A; /* Darker orange for hover states */
	--dps-gray: #6c757d; /* Medium grey for text */
	--dps-light-gray: #f8f9fa; /* Very light grey for backgrounds */
	/* ========================================
	   GEORGIA STATE PATROL THEME
	   Blue/Grey/Orange color scheme
	   ======================================== */
	--gsp-blue: var(--dps-blue); /* #1F419B */
	--gsp-blue-dark: var(--dps-navy); /* #11294B */
	--gsp-grey: var(--dps-grey); /* #D7D5CF */
	--gsp-grey-light: #E8E6E1; /* Lighter grey */
	--gsp-orange: var(--dps-orange); /* #DB4F30 */
	--gsp-orange-dark: var(--dps-dark-gold); /* #B8401A */
	/* ========================================
	   CVE THEME
	   Black/Yellow color scheme
	   ======================================== */
	--cve-black: var(--dps-black); /* #000000 */
	--cve-black-light: #2c2c2c; /* Lighter black for gradients */
	--cve-yellow: var(--dps-yellow); /* #EADC75 */
	--cve-yellow-dark: #D4C660; /* Darker yellow for hover */
	/* ========================================
	   CAPITOL POLICE THEME
	   Grey/White color scheme
	   ======================================== */
	--capitol-grey: var(--dps-grey); /* #D7D5CF */
	--capitol-grey-dark: #A8A59E; /* Darker grey */
	--capitol-white: var(--dps-white); /* #FFFFFF */
	--capitol-white-off: #F5F5F5; /* Off-white */
}



/* ============================================
   GEORGIA STATE PATROL THEME (Blue/Grey/Orange)
   Represents: Highway patrol, crash response
   ============================================ */
.navbar-theme-trooper {
	/* Blue-grey gradient for professional GSP look */
	background: linear-gradient(135deg, var(--gsp-blue) 0%, var(--gsp-blue-dark) 50%, var(--gsp-grey) 100%) !important;
	transition: background 0.3s ease;
}

/* GSP: orange streak through nav-link text */
#mainNavbar-v2.navbar-v2.navbar-theme-trooper .nav-link {
	--nav-streak: var(--gsp-orange) !important; /* #DB4F30 */
}

/* GSP: apply button on career page is solid — restore text visibility,
   let the ::before shine handle the hover animation instead */
#mainNavbar-v2.navbar-v2.navbar-theme-trooper .btn-apply-nav {
	--nav-streak: var(--gsp-orange) !important;
}

#mainNavbar-v2.navbar-v2.navbar-theme-trooper .btn-apply-nav:hover {
	border-bottom: 2px solid var(--gsp-orange) !important;
}

/* GSP, CVE, Capitol: Preserve shine effect ::before pseudo-element */
/*.navbar-theme-trooper .btn-apply-nav::before,
.navbar-theme-cve .btn-apply-nav::before,
.navbar-theme-capitol .btn-apply-nav::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
	transition: left 0.5s ease;
	z-index: -1;
}*/

/* GSP: Hover state with shine animation */
/*.navbar-theme-trooper .btn-apply-nav:hover {
	background: var(--gsp-orange-dark) !important;
	border-color: var(--gsp-orange-dark) !important;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(255, 165, 0, 0.5);
}*/

/* GSP: Trigger shine on hover */
.navbar-theme-trooper .btn-apply-nav:hover::before,
.navbar-theme-cve .btn-apply-nav:hover::before,
.navbar-theme-capitol .btn-apply-nav:hover::before {
	left: 100%
}

/* ============================================
   COMMERCIAL VEHICLE ENFORCEMENT (CVE) THEME
   Black/Yellow from official CVE badge
   Represents: Truck inspections, freight safety
   ============================================ */
.navbar-theme-cve {
	/* Black gradient for authoritative CVE look */
	background: linear-gradient(135deg, var(--cve-black) 0%, var(--cve-black-light) 50%, var(--dps-navy) 100%) !important;
	transition: background 0.3s ease
}

/* GSP: orange streak through nav-link text */
#mainNavbar-v2.navbar-v2.navbar-theme-cve .nav-link {
	--nav-streak: var(--cve-yellow) !important; /* #DB4F30 */
}

/* GSP: apply button on career page is solid — restore text visibility,
   let the ::before shine handle the hover animation instead */
#mainNavbar-v2.navbar-v2.navbar-theme-cve .btn-apply-nav {
	--nav-streak: var(--cve-yellow) !important;
}

#mainNavbar-v2.navbar-v2.navbar-theme-cve .btn-apply-nav:hover {
	border-bottom: 2px solid var(--cve-yellow) !important;
}

/* CVE: Yellow "Apply Now" button (matches CVE badge yellow) */
/*.navbar-theme-cve .btn-apply-nav {
	background: var(--cve-yellow) !important;
	border-color: var(--cve-yellow) !important;
	color: var(--dps-black) !important;*/		/* Black text on yellow */
	/*font-weight: 600;
	position: relative;
	overflow: hidden;
	z-index: 1;
}*/

/* CVE: Hover state with shine animation */
/*.navbar-theme-cve .btn-apply-nav:hover {
	background: var(--cve-yellow-dark) !important;
	border-color: var(--cve-yellow-dark) !important;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(234, 220, 117, 0.5);*/	/* Yellow glow */
/*}*/

/* ============================================
   CAPITOL POLICE THEME
   Grey/White from official Capitol Police branding
   Represents: State capitol security, dignitary protection
   ============================================ */
.navbar-theme-capitol {
	/* Grey gradient for professional Capitol Police look */
	background: linear-gradient( 135deg, var(--capitol-grey-dark) 0%, var(--dps-navy) 50%, var(--capitol-grey) 100%) !important;
	transition: background 0.3s ease;
}

/* GSP: orange streak through nav-link text */
#mainNavbar-v2.navbar-v2.navbar-theme-capitol .nav-link {
	--nav-streak: var(--dps-navy) !important; /* #DB4F30 */
}

/* GSP: apply button on career page is solid — restore text visibility,
   let the ::before shine handle the hover animation instead */
#mainNavbar-v2.navbar-v2.navbar-theme-capitol .btn-apply-nav {
	--nav-streak: var(--dps-navy) !important;
}

#mainNavbar-v2.navbar-v2.navbar-theme-capitol .btn-apply-nav:hover {
	border-bottom: 2px solid var(--capitol-grey) !important;
}

/* Capitol: White "Apply Now" button (stands out on grey) */
/*.navbar-theme-capitol .btn-apply-nav {
	background: var(--dps-gray) !important;
	border-color: var(--dps-gray) !important;
	color: var(--capitol-white-off) !important;
	font-weight: 600;
	position: relative;
	overflow: hidden;
	z-index: 1;
}*/

/* Capitol: Hover state with shine animation */
/*.navbar-theme-capitol .btn-apply-nav:hover {
	background: var(--capitol-grey-dark) !important;
	border-color: var(--capitol-grey-dark) !important;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(255, 255, 255, 0.4);*/	/* White glow */
/*}*/

/* ============================================
   DISPATCHER THEME
   Orange/Blue from official Dispatcher branding
   Represents: State capitol security, dignitary protection
   ============================================ */
.navbar-theme-dispatcher {
	/* Grey gradient for professional Capitol Police look */
	background: linear-gradient( 135deg, var(--capitol-grey-dark) 0%, var(--dps-navy) 50%, var(--capitol-grey) 100%) !important;
	transition: background 0.3s ease;
}

/* GSP: orange streak through nav-link text */
#mainNavbar-v2.navbar-v2.navbar-theme-dispatcher .nav-link {
	--nav-streak: var(--dps-blue) !important; /* #DB4F30 */
}

/* GSP: apply button on career page is solid — restore text visibility,
   let the ::before shine handle the hover animation instead */
#mainNavbar-v2.navbar-v2.navbar-theme-dispatcher .btn-apply-nav {
	--nav-streak: var(--dps-blue) !important;
}

#mainNavbar-v2.navbar-v2.navbar-theme-dispatcher .btn-apply-nav:hover {
	border-bottom: 2px solid var(--dps-orange) !important;
}

/* Capitol: White "Apply Now" button (stands out on grey) */
/*.navbar-theme-capitol .btn-apply-nav {
	background: var(--dps-gray) !important;
	border-color: var(--dps-gray) !important;
	color: var(--capitol-white-off) !important;
	font-weight: 600;
	position: relative;
	overflow: hidden;
	z-index: 1;
}*/

/* Capitol: Hover state with shine animation */
/*.navbar-theme-capitol .btn-apply-nav:hover {
	background: var(--capitol-grey-dark) !important;
	border-color: var(--capitol-grey-dark) !important;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(255, 255, 255, 0.4);*/	/* White glow */
/*}*/

/* ============================================
   NAVBAR BADGE IMAGE - SMOOTH TRANSITIONS
   ============================================ */

/* Smooth fade when badge changes */
.header-logo {
	transition: opacity 0.3s ease;
}

/* Optional: Add subtle scale effect on theme change */
.navbar-theme-trooper .header-logo,
.navbar-theme-cve .header-logo,
.navbar-theme-capitol .header-logo {
	transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Optional: Slight scale on hover for interactivity */
.navbar-brand:hover .header-logo {
	transform: scale(1.05);
}