/*
 * Cyberpunk visual layer for the Argon theme.
 * Keeps the original WordPress templates intact and overrides presentation only.
 */

:root {
	--cy-bg: #05070d;
	--cy-bg-2: #09101a;
	--cy-panel: rgba(9, 15, 26, 0.82);
	--cy-panel-strong: rgba(12, 18, 31, 0.94);
	--cy-cyan: #31e8ff;
	--cy-magenta: #ff3df2;
	--cy-yellow: #ffd166;
	--cy-green: #66ff99;
	--cy-text: #eaf8ff;
	--cy-muted: #8ca6b8;
	--cy-border: rgba(49, 232, 255, 0.26);
	--cy-border-hot: rgba(255, 61, 242, 0.32);
	--cy-shadow: 0 22px 70px rgba(0, 0, 0, 0.45), 0 0 34px rgba(49, 232, 255, 0.08);
	--cy-font-display: "Open Sans", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
	--cy-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
	--themecolor: var(--cy-cyan) !important;
	--themecolor-R: 49 !important;
	--themecolor-G: 232 !important;
	--themecolor-B: 255 !important;
	--themecolor-rgbstr: 49, 232, 255 !important;
	--color-background: var(--cy-bg) !important;
	--color-foreground: var(--cy-panel) !important;
	--color-widgets: rgba(10, 18, 32, 0.88) !important;
	--color-widgets-disabled: rgba(20, 31, 48, 0.9) !important;
	--color-border: var(--cy-border) !important;
	--color-border-on-foreground: rgba(49, 232, 255, 0.16) !important;
	--color-border-on-foreground-deeper: rgba(255, 61, 242, 0.18) !important;
	--color-text-deeper: var(--cy-text) !important;
	--card-radius: 7px !important;
}

html,
html.darkmode,
html.darkmode.amoled-dark {
	background: var(--cy-bg) !important;
	scroll-behavior: smooth;
}

body {
	background:
		linear-gradient(180deg, rgba(5, 7, 13, 0.88) 0%, rgba(8, 13, 24, 0.95) 48%, rgba(4, 7, 12, 1) 100%),
		linear-gradient(90deg, rgba(49, 232, 255, 0.08) 1px, transparent 1px),
		linear-gradient(0deg, rgba(255, 61, 242, 0.06) 1px, transparent 1px),
		var(--cy-bg) !important;
	background-size: auto, 72px 72px, 72px 72px, auto;
	color: var(--cy-text);
	font-family: var(--cy-font-display);
	letter-spacing: 0;
}

body::before,
body::after {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

body::before {
	background:
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.028) 0, rgba(255, 255, 255, 0.028) 1px, transparent 1px, transparent 5px),
		linear-gradient(115deg, transparent 0 16%, rgba(49, 232, 255, 0.08) 16.2%, transparent 17.2% 64%, rgba(255, 61, 242, 0.07) 64.3%, transparent 65.4%);
	mix-blend-mode: screen;
	opacity: 0.62;
}

body::after {
	background-image: radial-gradient(rgba(255, 255, 255, 0.08) 0.7px, transparent 0.7px);
	background-size: 3px 3px;
	opacity: 0.16;
}

#toolbar,
#banner,
#content,
#float_action_buttons,
.modal {
	position: relative;
	z-index: 1;
}

::selection {
	background: rgba(255, 61, 242, 0.38);
	color: #fff;
}

a,
a.text-primary,
.btn-neutral {
	color: var(--cy-cyan);
}

a:hover,
a:focus {
	color: var(--cy-magenta);
	text-decoration: none;
}

#navbar-main,
html.no-banner #navbar-main,
html.no-banner.toolbar-blur #navbar-main {
	background: rgba(5, 8, 14, 0.76) !important;
	backdrop-filter: blur(18px) saturate(150%);
	-webkit-backdrop-filter: blur(18px) saturate(150%);
	border-bottom: 1px solid rgba(49, 232, 255, 0.28);
	box-shadow: 0 1px 0 rgba(255, 61, 242, 0.18), 0 14px 36px rgba(0, 0, 0, 0.28);
}

#navbar-main.navbar-ontop {
	background: rgba(5, 8, 14, 0.42) !important;
}

.navbar-main .container {
	min-height: 46px;
}

.navbar-brand,
.navbar-brand:hover,
.navbar-title,
.navbar-title:hover {
	color: var(--cy-text) !important;
	font-family: var(--cy-font-mono);
	font-weight: 700;
	text-transform: uppercase;
	text-shadow: 0 0 14px rgba(49, 232, 255, 0.45);
}

.navbar-title::before {
	content: ">";
	color: var(--cy-magenta);
	margin-right: 0.45rem;
}

.navbar-nav .nav-link,
#navbar_search_input_container:not(.open) .input-group-text {
	color: rgba(234, 248, 255, 0.86) !important;
	font-family: var(--cy-font-mono);
	font-size: 0.82rem;
}

.navbar-nav .nav-link {
	position: relative;
	padding-inline: 0.9rem !important;
}

.navbar-nav .nav-link::after {
	content: "";
	position: absolute;
	left: 0.9rem;
	right: 0.9rem;
	bottom: 0.2rem;
	height: 1px;
	background: linear-gradient(90deg, var(--cy-cyan), var(--cy-magenta));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.22s ease;
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .current-menu-item .nav-link::after {
	transform: scaleX(1);
}

.navbar-toggler {
	border: 1px solid rgba(49, 232, 255, 0.35) !important;
	background: rgba(49, 232, 255, 0.08) !important;
}

.banner {
	height: 66vh;
	min-height: 440px;
	background:
		linear-gradient(160deg, rgba(49, 232, 255, 0.19) 0%, transparent 28%),
		linear-gradient(24deg, transparent 0 45%, rgba(255, 61, 242, 0.18) 45.4%, transparent 47.4%),
		linear-gradient(180deg, #07111d 0%, #090a18 58%, #05070d 100%) !important;
	border-bottom: 1px solid rgba(49, 232, 255, 0.22);
	margin-bottom: 28px;
}

.banner::before,
.banner::after {
	content: "";
	position: absolute;
	pointer-events: none;
}

.banner::before {
	inset: 0;
	background:
		linear-gradient(90deg, rgba(49, 232, 255, 0.08) 1px, transparent 1px),
		linear-gradient(0deg, rgba(49, 232, 255, 0.06) 1px, transparent 1px);
	background-size: 54px 54px;
	mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 70%, transparent 100%);
}

.banner::after {
	left: 0;
	right: 0;
	bottom: 0;
	height: 112px;
	background: linear-gradient(180deg, transparent, var(--cy-bg));
}

.banner .shape {
	background: transparent !important;
}

.banner .shape span {
	background: rgba(49, 232, 255, 0.12) !important;
	border: 1px solid rgba(49, 232, 255, 0.18);
	box-shadow: 0 0 30px rgba(255, 61, 242, 0.12);
}

.banner-title {
	font-size: clamp(2.2rem, 5vw, 5.6rem);
	font-family: var(--cy-font-mono);
	font-weight: 800;
	line-height: 0.95;
	text-transform: uppercase;
	text-shadow:
		2px 0 0 rgba(255, 61, 242, 0.8),
		-2px 0 0 rgba(49, 232, 255, 0.75),
		0 0 28px rgba(49, 232, 255, 0.45);
}

.banner-title-inner {
	display: inline-block;
	padding: 0.12em 0.22em;
	background: linear-gradient(90deg, rgba(49, 232, 255, 0.12), rgba(255, 61, 242, 0.1));
	clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}

.banner-subtitle {
	margin-top: 1rem;
	color: var(--cy-yellow);
	font-family: var(--cy-font-mono);
	font-size: clamp(0.9rem, 1.6vw, 1.15rem);
	text-shadow: 0 0 16px rgba(255, 209, 102, 0.34);
}

#content {
	max-width: 1320px;
	margin-top: -25vh;
}

html.no-banner #content {
	margin-top: 88px;
}

.card,
.bg-white,
.dropdown-menu,
.modal-content,
.donate-qrcode,
#leftbar_part1,
#leftbar_part2,
#rightbar > .card {
	background: var(--cy-panel) !important;
	backdrop-filter: blur(20px) saturate(145%);
	-webkit-backdrop-filter: blur(20px) saturate(145%);
	border: 1px solid var(--cy-border) !important;
	border-radius: var(--card-radius) !important;
	box-shadow: var(--cy-shadow);
	color: var(--cy-text);
}

.card {
	position: relative;
	overflow: hidden;
}

.card::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(135deg, rgba(49, 232, 255, 0.18), transparent 22%),
		linear-gradient(315deg, rgba(255, 61, 242, 0.14), transparent 20%);
	opacity: 0.55;
}

.card::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	border: 1px solid transparent;
	border-image: linear-gradient(135deg, rgba(49, 232, 255, 0.72), transparent 34%, rgba(255, 61, 242, 0.68)) 1;
	opacity: 0;
	transition: opacity 0.22s ease;
}

.card:hover::after {
	opacity: 1;
}

.post,
.post-full,
.page-information-card,
.related-posts,
.post-navigation {
	background: var(--cy-panel-strong) !important;
}

.post {
	margin-bottom: 26px;
	transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.post:hover {
	transform: translateY(-3px);
	border-color: var(--cy-border-hot) !important;
	box-shadow: 0 28px 80px rgba(0, 0, 0, 0.5), 0 0 42px rgba(255, 61, 242, 0.12);
}

.post-header,
.post-content,
.post-tags,
.card-body,
.post-navigation-item,
.related-post-card-container {
	position: relative;
	z-index: 1;
}

.post-title {
	color: var(--cy-text) !important;
	font-family: var(--cy-font-display);
	font-weight: 800;
	text-wrap: balance;
	text-shadow: 0 0 18px rgba(49, 232, 255, 0.18);
}

.post-title:hover {
	color: var(--cy-cyan) !important;
	text-shadow: 0 0 18px rgba(49, 232, 255, 0.45), 1px 0 0 rgba(255, 61, 242, 0.8);
}

.post-meta,
.post-meta a,
.post-meta-detail,
.post-meta-devide,
.text-muted,
.post-content,
.post-content p,
.comment-item-text,
.site-state-item-name,
#leftbar_overview_author_description {
	color: var(--cy-muted) !important;
}

.post-meta,
.post-meta-detail,
.badge,
.tag,
.page-link,
.site-state-item-count,
.site-state-item-name {
	font-family: var(--cy-font-mono);
	font-variant-numeric: tabular-nums;
}

.post-content {
	font-size: 1rem;
	line-height: 1.82;
}

article .post-content p,
article .post-content li {
	color: #d9edf6;
}

article .post-content h1,
article .post-content h2,
article .post-content h3,
article .post-content h4 {
	color: var(--cy-text);
	font-weight: 800;
	text-wrap: balance;
}

.article-header-style-1 article h1::after,
.article-header-style-1 article h2::after,
.article-header-style-1 article h3::after {
	background: linear-gradient(90deg, var(--cy-cyan), var(--cy-magenta)) !important;
	box-shadow: 0 0 18px rgba(49, 232, 255, 0.4);
}

article .post-content blockquote {
	background: rgba(49, 232, 255, 0.07);
	border-left: 3px solid var(--cy-magenta);
	color: #d9edf6;
}

html:not(.disable-codeblock-style) article .post-content > code:not([hljs-codeblock-inner]),
article .post-content > p > code:not([hljs-codeblock-inner]),
pre,
code,
kbd {
	background: rgba(2, 6, 13, 0.9) !important;
	color: var(--cy-green) !important;
	border: 1px solid rgba(102, 255, 153, 0.24);
	font-family: var(--cy-font-mono);
}

.post-thumbnail {
	filter: saturate(1.18) contrast(1.06);
}

.post-header-with-thumbnail::after {
	background: linear-gradient(180deg, rgba(5, 7, 13, 0.08), rgba(5, 7, 13, 0.82)) !important;
}

.badge,
.tag,
.post-meta-detail-tag,
.page-link {
	background: rgba(49, 232, 255, 0.08) !important;
	border: 1px solid rgba(49, 232, 255, 0.28) !important;
	color: var(--cy-cyan) !important;
	border-radius: 4px !important;
}

.badge:hover,
.tag:hover,
.post-meta-detail-tag:hover {
	background: rgba(255, 61, 242, 0.13) !important;
	border-color: rgba(255, 61, 242, 0.46) !important;
	color: #fff !important;
}

.btn,
.btn-primary,
.btn-secondary,
.btn-neutral,
input[type="submit"] {
	border-radius: 5px !important;
	font-family: var(--cy-font-mono);
	font-weight: 700;
	letter-spacing: 0;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.btn-primary,
input[type="submit"] {
	background: linear-gradient(90deg, var(--cy-cyan), var(--cy-magenta)) !important;
	border: 0 !important;
	color: #02040a !important;
	box-shadow: 0 0 22px rgba(49, 232, 255, 0.22);
}

.btn:hover,
input[type="submit"]:hover {
	transform: translateY(-1px);
}

.btn:active,
input[type="submit"]:active {
	transform: translateY(1px) scale(0.99);
}

.btn-neutral,
.btn-secondary {
	background: rgba(49, 232, 255, 0.08) !important;
	border: 1px solid rgba(49, 232, 255, 0.28) !important;
	color: var(--cy-cyan) !important;
}

.form-control,
.form-control:focus,
.input-group-text,
.focused .input-group-text,
.custom-control-label::before {
	background: rgba(3, 8, 15, 0.82) !important;
	border-color: rgba(49, 232, 255, 0.26) !important;
	color: var(--cy-text) !important;
	box-shadow: none !important;
}

.form-control::placeholder {
	color: rgba(140, 166, 184, 0.78);
}

.form-control:focus {
	border-color: var(--cy-magenta) !important;
	box-shadow: 0 0 0 3px rgba(255, 61, 242, 0.12) !important;
}

.dropdown-menu::before {
	background: var(--cy-panel-strong) !important;
	border-color: var(--cy-border) !important;
}

.dropdown-item {
	color: var(--cy-text);
	font-family: var(--cy-font-mono);
}

.dropdown-item:focus,
.dropdown-item:hover,
.page-link:hover {
	background: rgba(49, 232, 255, 0.1) !important;
	color: var(--cy-cyan) !important;
}

.page-item.active .page-link {
	background: var(--cy-magenta) !important;
	border-color: var(--cy-magenta) !important;
	color: #fff !important;
}

#leftbar_part1 .leftbar-banner,
#leftbar_announcement {
	background:
		linear-gradient(135deg, rgba(49, 232, 255, 0.22), transparent 48%),
		linear-gradient(315deg, rgba(255, 61, 242, 0.22), transparent 48%),
		rgba(8, 15, 26, 0.94) !important;
}

.leftbar-banner-title,
#leftbar_overview_author_name,
#rightbar > .card > h6,
.widget h6,
.post-comment-title {
	color: var(--cy-text) !important;
	font-family: var(--cy-font-mono);
	text-transform: uppercase;
	text-shadow: 0 0 14px rgba(49, 232, 255, 0.26);
}

#leftbar_overview_author_image {
	border: 2px solid rgba(49, 232, 255, 0.55);
	box-shadow: 0 0 22px rgba(49, 232, 255, 0.26), 0 0 36px rgba(255, 61, 242, 0.12);
}

.site-state-item-count {
	color: var(--cy-yellow);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
	background: linear-gradient(90deg, rgba(49, 232, 255, 0.2), rgba(255, 61, 242, 0.2)) !important;
	color: #fff !important;
	border: 1px solid rgba(49, 232, 255, 0.28);
}

.comment-item,
.comment-reply,
.related-post-card-container,
.post-navigation-item {
	background: rgba(49, 232, 255, 0.035);
	border-color: rgba(49, 232, 255, 0.14) !important;
}

.comment-item:hover,
.related-post-card-container:hover,
.post-navigation-item:hover {
	background: rgba(255, 61, 242, 0.08);
}

.float-action-buttons .fabtn {
	background: rgba(5, 8, 14, 0.82) !important;
	border: 1px solid rgba(49, 232, 255, 0.34) !important;
	color: var(--cy-cyan) !important;
	box-shadow: 0 0 24px rgba(49, 232, 255, 0.18);
}

.float-action-buttons .fabtn:hover {
	color: var(--cy-magenta) !important;
	border-color: rgba(255, 61, 242, 0.48) !important;
}

hr {
	border-color: rgba(49, 232, 255, 0.16);
}

table,
.wp-block-table table {
	color: var(--cy-text);
	background: rgba(5, 8, 14, 0.55);
	border: 1px solid rgba(49, 232, 255, 0.16);
}

th,
td {
	border-color: rgba(49, 232, 255, 0.16) !important;
}

img {
	border-radius: 5px;
}

@media (max-width: 900px) {
	.banner {
		height: 58vh;
		min-height: 360px;
	}

	.banner-title {
		font-size: clamp(2rem, 13vw, 3.4rem);
	}

	#content {
		margin-top: -16vh;
		padding-inline: 10px;
	}

	#main {
		padding-inline: 0;
	}

	.card,
	.post,
	.post-full {
		border-radius: 6px !important;
	}

	.navbar-collapse {
		background: rgba(5, 8, 14, 0.96) !important;
		border: 1px solid rgba(49, 232, 255, 0.22);
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}