/*
	ISDG - Professional Blue Theme
	Custom theme overlay for Dimension template
	Created: 2025

	This theme transforms the original design with:
	- Professional blue color palette
	- Modern glassmorphism effects
	- Enhanced animations and interactions
	- Improved visual hierarchy
*/

/* ========================================================================
   VARIABLES & COLOR PALETTE
   ======================================================================== */

:root {
	/* Primary Colors */
	--color-bg: #0D1B2A;
	--color-bg-alt: #051320;
	--color-bg-overlay: rgba(10, 36, 99, 0.75);

	/* Accent Colors */
	--color-primary: #1E5AA8;
	--color-primary-light: #3FA7D6;
	--color-primary-dark: #0A2463;
	--color-accent: #59C3C3;
	--color-accent-glow: rgba(63, 167, 214, 0.3);

	/* Text Colors */
	--color-fg: #E8F1F5;
	--color-fg-bold: #FFFFFF;
	--color-fg-light: rgba(232, 241, 245, 0.6);
	--color-fg-muted: rgba(232, 241, 245, 0.4);

	/* Border Colors */
	--color-border: rgba(63, 167, 214, 0.5);
	--color-border-light: rgba(63, 167, 214, 0.3);
	--color-border-bg: rgba(30, 90, 168, 0.15);
	--color-border-bg-alt: rgba(30, 90, 168, 0.3);

	/* Glassmorphism */
	--glass-bg: rgba(30, 90, 168, 0.1);
	--glass-border: rgba(63, 167, 214, 0.2);

	/* Gradients */
	--gradient-start: #0A2463;
	--gradient-end: #1E5AA8;
}

/* ========================================================================
   BACKGROUND & ANIMATIONS
   ======================================================================== */

body {
	background: var(--color-bg);
	color: var(--color-fg);
}

#bg:before {
	background-image:
		linear-gradient(135deg,
			var(--gradient-start) 0%,
			var(--color-primary-dark) 25%,
			var(--color-primary) 50%,
			var(--color-primary-dark) 75%,
			var(--gradient-start) 100%),
		linear-gradient(to top, var(--color-bg-overlay), transparent 60%),
		url("../../images/overlay.png") !important;
	background-size: 400% 400%, auto, 256px 256px !important;
	background-position: 0% 50%, center, center !important;
	animation: gradientShift 20s ease infinite;
}

#bg:after {
	background-image:
		radial-gradient(circle at 20% 80%, var(--color-primary-dark) 0%, transparent 50%),
		radial-gradient(circle at 80% 20%, var(--color-primary) 0%, transparent 50%),
		url("../../images/001.jpg") !important;
	background-blend-mode: overlay;
}

@keyframes gradientShift {
	0% {
		background-position: 0% 50%, center, center;
	}
	50% {
		background-position: 100% 50%, center, center;
	}
	100% {
		background-position: 0% 50%, center, center;
	}
}

body.is-preload #bg:before {
	background-color: var(--color-bg-alt) !important;
}

/* ========================================================================
   HEADER STYLING
   ======================================================================== */

#header {
	background-image: radial-gradient(circle at center,
		var(--color-accent-glow) 0%,
		transparent 60%) !important;
	padding: 2rem;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}

#header > *:before {
	background: var(--color-border) !important;
	width: 2px !important;
	left: calc(50% - 1px) !important;
}

/* Logo with Glassmorphism */
#header .logo {
	border: solid 2px var(--color-border) !important;
	background: var(--glass-bg);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow:
		0 8px 32px 0 var(--color-accent-glow),
		inset 0 0 20px 0 var(--glass-border);
	transition: all 0.3s ease;
}

#header .logo:hover {
	box-shadow:
		0 12px 48px 0 var(--color-accent-glow),
		inset 0 0 30px 0 var(--color-border);
	transform: scale(1.05);
}

#header .logo .icon:before {
	color: var(--color-primary-light) !important;
	text-shadow: 0 0 20px var(--color-accent-glow);
}

/* Content Border */
#header .content {
	border-color: var(--color-border) !important;
}

/* Navigation with Modern Effects */
#header nav ul {
	border: solid 2px var(--color-border) !important;
	border-radius: 12px !important;
	background: var(--glass-bg);
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	box-shadow: 0 8px 32px 0 rgba(10, 36, 99, 0.37);
	overflow: hidden;
}

#header nav ul li {
	border-left: solid 2px var(--color-border-light) !important;
	position: relative;
}

#header nav ul li:before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0;
	background: linear-gradient(135deg, var(--color-primary-light), var(--color-accent));
	transition: height 0.3s ease;
	z-index: 0;
}

#header nav ul li:hover:before {
	height: 100%;
}

#header nav ul li a {
	font-weight: 500;
	position: relative;
	z-index: 1;
	transition: all 0.3s ease;
}

#header nav ul li a:hover {
	background-color: transparent !important;
	color: var(--color-fg-bold) !important;
	text-shadow: 0 0 10px var(--color-accent-glow);
	transform: translateY(-2px);
}

#header nav ul li a:active {
	background-color: var(--color-border-bg-alt) !important;
	transform: translateY(0);
}

/* ========================================================================
   MAIN CONTENT & ARTICLES
   ======================================================================== */

#main article {
	background: linear-gradient(135deg,
		rgba(13, 27, 42, 0.95) 0%,
		rgba(10, 36, 99, 0.9) 100%) !important;
	border-radius: 12px !important;
	border: solid 2px var(--glass-border) !important;
	box-shadow:
		0 8px 32px 0 rgba(10, 36, 99, 0.5),
		inset 0 0 60px 0 rgba(63, 167, 214, 0.1) !important;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	transform: translateY(0.25rem) scale(0.95) !important;
}

#main article.active {
	transform: translateY(0) scale(1) !important;
}

/* Close Button with Enhanced Effects */
#main article .close:before {
	background: var(--glass-bg) !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: solid 1px var(--color-border-light) !important;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='20px' height='20px' viewBox='0 0 20 20' zoomAndPan='disable'%3E%3Cstyle%3Eline %7B stroke: %233FA7D6%3B stroke-width: 2%3B %7D%3C/style%3E%3Cline x1='2' y1='2' x2='18' y2='18' /%3E%3Cline x1='18' y1='2' x2='2' y2='18' /%3E%3C/svg%3E") !important;
	box-shadow: 0 4px 16px rgba(10, 36, 99, 0.3);
	transition: all 0.3s ease;
}

#main article .close:hover:before {
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light)) !important;
	border-color: var(--color-primary-light) !important;
	box-shadow: 0 6px 24px var(--color-accent-glow);
	transform: rotate(90deg) scale(1.1);
}

#main article .close:active:before {
	background: var(--color-primary-dark) !important;
	transform: rotate(90deg) scale(0.95);
	box-shadow: 0 2px 8px rgba(10, 36, 99, 0.5);
}

/* ========================================================================
   BUTTONS
   ======================================================================== */

input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
	background: var(--glass-bg) !important;
	border-radius: 12px !important;
	box-shadow:
		inset 0 0 0 2px var(--color-border),
		0 8px 24px 0 rgba(10, 36, 99, 0.3) !important;
	color: var(--color-fg-bold) !important;
	font-weight: 500;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	position: relative;
	overflow: hidden;
	transition: all 0.3s ease;
}

input[type="submit"]:before,
input[type="reset"]:before,
input[type="button"]:before,
button:before,
.button:before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, var(--color-accent-glow), transparent);
	transition: left 0.5s ease;
}

input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
button:hover,
.button:hover {
	background: var(--color-border-bg) !important;
	box-shadow:
		inset 0 0 0 2px var(--color-primary-light),
		0 12px 32px 0 var(--color-accent-glow) !important;
	transform: translateY(-2px);
	text-shadow: 0 0 10px var(--color-accent-glow);
}

input[type="submit"]:hover:before,
input[type="reset"]:hover:before,
input[type="button"]:hover:before,
button:hover:before,
.button:hover:before {
	left: 100%;
}

input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active,
button:active,
.button:active {
	background: var(--color-border-bg-alt) !important;
	transform: translateY(0);
	box-shadow:
		inset 0 0 0 2px var(--color-border),
		0 4px 12px 0 rgba(10, 36, 99, 0.3) !important;
}

/* Primary Button */
input[type="submit"].primary,
input[type="reset"].primary,
input[type="button"].primary,
button.primary,
.button.primary {
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light)) !important;
	color: var(--color-fg-bold) !important;
	font-weight: 600;
	box-shadow:
		0 8px 24px 0 var(--color-accent-glow),
		inset 0 0 0 2px var(--color-border) !important;
}

input[type="submit"].primary:hover,
input[type="reset"].primary:hover,
input[type="button"].primary:hover,
button.primary:hover,
.button.primary:hover {
	background: linear-gradient(135deg, var(--color-primary-light), var(--color-accent)) !important;
	box-shadow:
		0 12px 36px 0 var(--color-accent-glow),
		inset 0 0 20px 0 rgba(255, 255, 255, 0.1) !important;
	transform: translateY(-3px) scale(1.05);
}

input[type="submit"].primary:active,
input[type="reset"].primary:active,
input[type="button"].primary:active,
button.primary:active,
.button.primary:active {
	background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary)) !important;
	box-shadow: 0 4px 12px 0 var(--color-accent-glow) !important;
	transform: translateY(-1px) scale(1.02);
}

/* ========================================================================
   FORMS & INPUTS
   ======================================================================== */

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
select,
textarea {
	border: solid 2px var(--color-border) !important;
	border-radius: 8px !important;
	background-color: rgba(13, 27, 42, 0.5) !important;
	color: var(--color-fg) !important;
	transition: all 0.3s ease;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
	background: rgba(30, 90, 168, 0.2) !important;
	border-color: var(--color-primary-light) !important;
	box-shadow: 0 0 0 1px var(--color-primary-light),
				0 0 20px var(--color-accent-glow) !important;
}

/* ========================================================================
   TYPOGRAPHY
   ======================================================================== */

h1, h2, h3, h4, h5, h6 {
	color: var(--color-fg-bold) !important;
	text-shadow: 0 0 20px rgba(63, 167, 214, 0.2);
}

h1.major, h2.major, h3.major, h4.major, h5.major, h6.major {
	border-bottom: solid 2px var(--color-primary-light) !important;
	padding-bottom: 0.75rem;
}

a {
	color: var(--color-primary-light);
	border-bottom: dotted 1px var(--color-border-light);
	transition: all 0.3s ease;
}

a:hover {
	color: var(--color-accent);
	border-bottom-color: var(--color-accent);
	text-shadow: 0 0 10px var(--color-accent-glow);
}

strong, b {
	color: var(--color-fg-bold) !important;
}

code {
	background: rgba(30, 90, 168, 0.2) !important;
	border-radius: 6px !important;
	border: solid 1px var(--glass-border);
}

blockquote {
	border-left: solid 4px var(--color-primary-light) !important;
	background: rgba(30, 90, 168, 0.1);
	padding: 1rem 1rem 1rem 2rem;
	border-radius: 0 8px 8px 0;
}

hr {
	border-bottom: solid 2px var(--color-border) !important;
}

/* ========================================================================
   BOXES & CONTAINERS
   ======================================================================== */

.box {
	border: solid 2px var(--color-border) !important;
	border-radius: 12px !important;
	background: var(--glass-bg);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

/* ========================================================================
   TABLES
   ======================================================================== */

table tbody tr {
	border: solid 1px var(--color-border) !important;
}

table tbody tr:nth-child(2n + 1) {
	background-color: rgba(30, 90, 168, 0.1) !important;
}

table th {
	color: var(--color-primary-light) !important;
}

table thead {
	border-bottom: solid 2px var(--color-primary-light) !important;
}

table tfoot {
	border-top: solid 2px var(--color-primary-light) !important;
}

/* ========================================================================
   ICONS
   ======================================================================== */

ul.icons li a {
	box-shadow: inset 0 0 0 2px var(--color-border) !important;
	transition: all 0.3s ease;
}

ul.icons li a:hover {
	background-color: var(--color-border-bg) !important;
	box-shadow: inset 0 0 0 2px var(--color-primary-light),
				0 0 20px var(--color-accent-glow) !important;
	transform: scale(1.1);
}

ul.icons li a:active {
	background-color: var(--color-border-bg-alt) !important;
	transform: scale(0.95);
}

/* ========================================================================
   LISTS
   ======================================================================== */

ul.alt li {
	border-top: solid 1px var(--color-border) !important;
}

/* ========================================================================
   RESPONSIVE ADJUSTMENTS
   ======================================================================== */

@media screen and (max-width: 480px) {
	#header nav ul li:before {
		display: none; /* Disable gradient animation on mobile */
	}
}