/**
 * Neon Circuit visual layer.
 *
 * This stylesheet intentionally sits on top of the Blogsy framework. It uses
 * only CSS gradients and shapes, so there are no copied reference images or
 * required external background assets.
 */

:root {
	--nc-raspberry: #b80654;
	--nc-hot-pink: #db0c76;
	--nc-violet: #a048c0;
	--nc-orange: #f25103;
	--nc-yellow: #fdac03;
	--nc-teal: #01a1af;
	--nc-blue: #023f80;
	--nc-navy: #010b24;
	--nc-panel: #06163d;
	--nc-panel-deep: #020f34;
	--nc-text: #d9efff;
	--nc-muted: #9db8d4;
	--nc-line: rgba(65, 221, 239, 0.26);
	--nc-glow-teal: 0 0 26px rgba(1, 161, 175, 0.32);
	--nc-glow-pink: 0 0 24px rgba(219, 12, 118, 0.3);
	--pt-soft-radius: 16px;
	--pt-btn-radius: 8px;
}

html,
html[scheme="dark"],
html[scheme="light"] {
	--pt-accent-color: var(--nc-teal);
	--pt-accent-40-color: #67ced6;
	--pt-accent-80-color: rgba(1, 161, 175, 0.18);
	--pt-accent-color-alt: var(--nc-navy);
	--pt-second-color: var(--nc-hot-pink);
	--pt-second-color-alt: #fff;
	--pt-button-bg: var(--nc-teal);
	--pt-button-bg-hover: var(--nc-hot-pink);
	--pt-body-color: var(--nc-text);
	--pt-body-bg-color: var(--nc-navy);
	--pt-headings-color: #fff;
	--pt-card-bg: var(--nc-panel);
	--pt-border-color: rgba(65, 221, 239, 0.22);
	--pt-shadow-soft: 0 18px 55px rgba(0, 4, 20, 0.42);
	color-scheme: dark;
}

html {
	background: var(--nc-navy);
}

body.neon-circuit-theme {
	min-height: 100vh;
	color: var(--nc-text);
	background-color: var(--nc-navy);
	background-image:
		radial-gradient(circle at 12% 4%, rgba(2, 63, 128, 0.82), transparent 27rem),
		radial-gradient(circle at 92% 23%, rgba(160, 72, 192, 0.17), transparent 25rem),
		radial-gradient(circle at 72% 82%, rgba(1, 161, 175, 0.13), transparent 30rem),
		linear-gradient(rgba(48, 173, 205, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(48, 173, 205, 0.035) 1px, transparent 1px),
		linear-gradient(160deg, #010b24 0%, #020d2a 48%, #01081d 100%);
	background-attachment: fixed;
	background-size: auto, auto, auto, 42px 42px, 42px 42px, auto;
}

body.neon-circuit-theme::before {
	position: fixed;
	z-index: 0;
	inset: 0;
	pointer-events: none;
	content: "";
	opacity: 0.55;
	background:
		linear-gradient(90deg, transparent 7%, rgba(1, 161, 175, 0.42) 7.1%, transparent 7.2%) 0 8% / 100% 1px no-repeat,
		linear-gradient(90deg, transparent 72%, rgba(219, 12, 118, 0.42) 72.1%, transparent 72.2%) 0 37% / 100% 1px no-repeat,
		linear-gradient(90deg, transparent 21%, rgba(253, 172, 3, 0.4) 21.1%, transparent 21.2%) 0 83% / 100% 1px no-repeat;
}

#site {
	position: relative;
	z-index: 1;
}

::selection {
	color: #fff;
	background: var(--nc-hot-pink);
}

a {
	text-underline-offset: 0.22em;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--nc-yellow) !important;
	outline-offset: 3px;
}

h1,
h2,
h3,
h4,
h5,
h6,
.site-title,
.blogsy-divider-heading .title {
	font-family: "Poppins", "Inter", system-ui, sans-serif;
	letter-spacing: 0.025em;
}

/* Header and navigation */
.blogsy-topbar {
	color: var(--nc-muted);
	background: rgba(1, 8, 29, 0.82) !important;
	border-bottom: 1px solid rgba(1, 161, 175, 0.2) !important;
}

.pt-header-inner,
html[scheme="dark"] .pt-header-inner,
html[scheme="light"] .pt-header-inner,
.pt-header-layout-2 .pt-header .pt-header-inner,
.pt-header-layout-3 .pt-header .pt-header-inner > .pt-header-container {
	color: #fff;
	background: rgba(1, 11, 36, 0.88) !important;
	border-color: rgba(1, 161, 175, 0.27) !important;
	box-shadow: 0 12px 42px rgba(0, 4, 20, 0.46), inset 0 -1px rgba(219, 12, 118, 0.18);
	backdrop-filter: blur(18px) saturate(135%);
}

.pt-header-layout-1 .pt-header .pt-header-inner .pt-header-container::after {
	background:
		linear-gradient(var(--nc-navy), var(--nc-navy)) padding-box,
		linear-gradient(90deg, var(--nc-teal), var(--nc-violet), var(--nc-hot-pink), var(--nc-orange)) border-box !important;
	border: 1px solid transparent !important;
	box-shadow: var(--nc-glow-teal);
}

.pt-logo .site-title a {
	color: #fff;
	background: linear-gradient(100deg, #fff 8%, #72f5ff 44%, #ff6fbd 78%, #ffd45c 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

.pt-logo .site-description {
	color: var(--nc-muted);
}

.pt-header .blogsy-header-nav > li > a,
.pt-header .blogsy-header-v-nav > li > a {
	color: #eaf8ff !important;
	font-size: 0.82em;
	font-weight: 650;
	letter-spacing: 0.085em;
	text-transform: uppercase;
}

.pt-header .blogsy-header-nav > li > a:hover,
.pt-header .blogsy-header-nav > li > a:focus,
.pt-header .blogsy-header-nav > li.current-menu-item > a,
.pt-header .blogsy-header-nav > li.current-menu-ancestor > a {
	color: #71f5ff !important;
	text-shadow: 0 0 15px rgba(1, 161, 175, 0.68);
}

.blogsy-header-nav .sub-menu,
.blogsy-header-v-nav,
.mobile-menu-sidebar,
.blogsy-offcanvas-container,
.popup-search .popup-search-container {
	color: var(--nc-text);
	background: rgba(2, 15, 52, 0.98) !important;
	border: 1px solid rgba(1, 161, 175, 0.3) !important;
	box-shadow: 0 24px 70px rgba(0, 3, 18, 0.68), var(--nc-glow-teal);
}

.blogsy-header-nav .sub-menu::before,
.mobile-menu-sidebar::before {
	background: linear-gradient(90deg, var(--nc-teal), var(--nc-violet), var(--nc-hot-pink));
}

/* Content surfaces */
.card-layout,
.card-layout-w,
.sidebar-container .sidebar-container-inner > .blogsy-sidebar-widget,
.page-content-wrapper .entry-content,
.page-content-wrapper .page-content,
.comments-area,
.author-box,
.next-prev-posts,
.single-share-box {
	position: relative;
	color: var(--nc-text);
	background:
		linear-gradient(145deg, rgba(7, 28, 74, 0.97), rgba(2, 15, 52, 0.97)) padding-box,
		linear-gradient(135deg, rgba(1, 161, 175, 0.7), rgba(160, 72, 192, 0.3) 48%, rgba(219, 12, 118, 0.55)) border-box !important;
	border: 1px solid transparent !important;
	border-radius: 18px 5px 18px 5px !important;
	box-shadow: var(--pt-shadow-soft), inset 0 1px rgba(255, 255, 255, 0.035) !important;
}

.card-layout::before,
.card-layout-w::before,
.sidebar-container .sidebar-container-inner > .blogsy-sidebar-widget::before {
	position: absolute;
	z-index: 2;
	top: -1px;
	left: 22px;
	width: 72px;
	height: 2px;
	content: "";
	background: linear-gradient(90deg, var(--nc-teal), transparent);
	box-shadow: var(--nc-glow-teal);
}

.default-post-list-item {
	transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.default-post-list-item:hover,
.default-post-list-item:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 24px 65px rgba(0, 3, 20, 0.58), 0 0 26px rgba(1, 161, 175, 0.2) !important;
}

.default-post-list-item:nth-child(3n + 2)::before {
	background: linear-gradient(90deg, var(--nc-hot-pink), transparent);
	box-shadow: var(--nc-glow-pink);
}

.default-post-list-item:nth-child(3n)::before {
	background: linear-gradient(90deg, var(--nc-yellow), transparent);
	box-shadow: 0 0 22px rgba(253, 172, 3, 0.28);
}

.image-container {
	overflow: hidden;
	background: var(--nc-panel-deep);
	border-radius: 12px 3px 12px 3px;
}

.image-container img,
.single-hero img,
.wp-post-image {
	filter: saturate(1.12) contrast(1.04);
	transition: transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 250ms ease;
}

.post-wrapper:hover .image-container img {
	filter: saturate(1.25) contrast(1.06);
	transform: scale(1.025);
}

.post-wrapper .title a,
.single-hero-title .title,
.entry-title,
.blog-archive-title .title {
	color: #fff !important;
}

.post-wrapper .title a:hover,
.post-wrapper .title a:focus {
	color: #71f5ff !important;
}

.excerpt,
.meta-details,
.footer-meta,
.date-wrapper,
.comment-metadata,
.wp-block-post-date {
	color: var(--nc-muted) !important;
}

.terms-wrapper .term-item,
.post-categories a,
.wp-block-post-terms a {
	color: #fff !important;
	background: rgba(219, 12, 118, 0.15);
	border: 1px solid rgba(219, 12, 118, 0.48);
	border-radius: 5px 2px 5px 2px;
	box-shadow: inset 0 0 12px rgba(219, 12, 118, 0.08);
}

.terms-wrapper .term-item:hover,
.post-categories a:hover,
.wp-block-post-terms a:hover {
	color: #fff !important;
	background: var(--nc-hot-pink);
	box-shadow: var(--nc-glow-pink);
}

/* Dividers, headings, and metadata */
.blogsy-divider-heading {
	--divider-color: var(--nc-teal) !important;
}

.blogsy-divider-heading .title::after,
.widget-title::after {
	background: linear-gradient(90deg, var(--nc-teal), var(--nc-violet), var(--nc-hot-pink));
	box-shadow: var(--nc-glow-teal);
}

.blog-archive-title,
.single-hero-title {
	border-color: rgba(1, 161, 175, 0.24) !important;
}

.meta-details svg,
.footer-meta svg,
.date-wrapper svg,
.comments svg,
.reading-time svg {
	color: var(--nc-teal);
	fill: none;
	stroke: currentColor !important;
}

/* Buttons and controls */
.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.wp-element-button,
.wp-block-button__link,
.blogsy-btn {
	color: #fff !important;
	background: linear-gradient(100deg, var(--nc-raspberry), var(--nc-hot-pink) 52%, var(--nc-violet)) !important;
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
	border-radius: 7px 2px 7px 2px !important;
	box-shadow: 0 8px 24px rgba(184, 6, 84, 0.25), inset 0 1px rgba(255, 255, 255, 0.17);
	font-weight: 700;
	letter-spacing: 0.045em;
	text-transform: uppercase;
	transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.button:hover,
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.wp-element-button:hover,
.wp-block-button__link:hover,
.blogsy-btn:hover {
	color: var(--nc-navy) !important;
	background: linear-gradient(100deg, var(--nc-yellow), var(--nc-orange)) !important;
	box-shadow: 0 10px 28px rgba(253, 172, 3, 0.3);
	filter: brightness(1.05);
	transform: translateY(-2px);
}

.is-style-outline > .wp-block-button__link {
	color: #70f4ff !important;
	background: rgba(1, 161, 175, 0.08) !important;
	border-color: var(--nc-teal) !important;
	box-shadow: inset 0 0 18px rgba(1, 161, 175, 0.12);
}

select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"] {
	color: #fff !important;
	background: rgba(1, 11, 36, 0.82) !important;
	border: 1px solid rgba(1, 161, 175, 0.34) !important;
	border-radius: 8px 2px 8px 2px !important;
	box-shadow: inset 0 0 20px rgba(2, 63, 128, 0.18);
}

select:focus,
textarea:focus,
input:focus {
	border-color: var(--nc-teal) !important;
	box-shadow: 0 0 0 3px rgba(1, 161, 175, 0.14), var(--nc-glow-teal) !important;
}

::placeholder {
	color: #7e9dbb !important;
	opacity: 1;
}

/* Pagination */
.default-post-list-pagination .page-numbers,
.post-nav-links .post-page-numbers,
#back-to-top {
	color: var(--nc-text) !important;
	background: rgba(6, 22, 61, 0.92) !important;
	border: 1px solid rgba(1, 161, 175, 0.28) !important;
	border-radius: 7px 2px 7px 2px !important;
}

.default-post-list-pagination .page-numbers:hover,
.default-post-list-pagination .page-numbers.current,
.post-nav-links .post-page-numbers:hover,
.post-nav-links .post-page-numbers.current,
#back-to-top:hover {
	color: var(--nc-navy) !important;
	background: var(--nc-teal) !important;
	box-shadow: var(--nc-glow-teal) !important;
}

/* Blocks and article content */
blockquote,
.wp-block-quote:not(.is-style-plain) {
	color: #eefaff;
	background: rgba(160, 72, 192, 0.08) !important;
	border-left: 4px solid var(--nc-violet) !important;
	box-shadow: inset 16px 0 28px rgba(160, 72, 192, 0.08);
}

code,
pre {
	color: #a7f8ff !important;
	background: #01081d !important;
	border: 1px solid rgba(1, 161, 175, 0.24);
	border-radius: 8px 2px 8px 2px;
}

table,
th,
td {
	border-color: rgba(1, 161, 175, 0.25) !important;
}

th {
	color: #fff;
	background: rgba(2, 63, 128, 0.55);
}

tr:nth-child(even) {
	background: rgba(1, 161, 175, 0.045);
}

/* Footer */
.site-default-footer,
html[scheme="dark"] .site-default-footer,
html[scheme="light"] .site-default-footer {
	position: relative;
	color: var(--nc-muted);
	background:
		radial-gradient(circle at 16% 0, rgba(2, 63, 128, 0.52), transparent 22rem),
		linear-gradient(160deg, #020f34, #01081d) !important;
	border-top: 1px solid rgba(1, 161, 175, 0.26);
	box-shadow: 0 -18px 55px rgba(0, 4, 20, 0.32);
}

.site-default-footer::before {
	position: absolute;
	top: -1px;
	left: 0;
	width: 42%;
	height: 2px;
	content: "";
	background: linear-gradient(90deg, var(--nc-teal), var(--nc-hot-pink), transparent);
	box-shadow: var(--nc-glow-teal);
}

.site-default-footer a {
	color: #cbeeff;
}

.site-default-footer a:hover,
.site-default-footer a:focus {
	color: #72f5ff;
}

.site-default-footer .default-footer-copyright {
	border-top-color: rgba(1, 161, 175, 0.2) !important;
}

/* WooCommerce */
.woocommerce ul.products li.product,
.woocommerce div.product,
.woocommerce-cart-form,
.woocommerce-checkout-review-order {
	color: var(--nc-text);
	background: rgba(6, 22, 61, 0.96);
	border: 1px solid rgba(1, 161, 175, 0.25);
	border-radius: 14px 4px 14px 4px;
}

.woocommerce span.onsale {
	color: #fff;
	background: var(--nc-hot-pink);
	box-shadow: var(--nc-glow-pink);
}

.woocommerce .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: #71f5ff !important;
}

@media (max-width: 767px) {
	body.neon-circuit-theme {
		background-size: auto, auto, auto, 30px 30px, 30px 30px, auto;
	}

	.card-layout,
	.card-layout-w,
	.sidebar-container .sidebar-container-inner > .blogsy-sidebar-widget {
		border-radius: 13px 4px 13px 4px !important;
	}

	.pt-header .blogsy-header-nav > li > a,
	.pt-header .blogsy-header-v-nav > li > a {
		letter-spacing: 0.045em;
	}
}

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

	.default-post-list-item:hover,
	.button:hover,
	button:hover,
	.wp-element-button:hover {
		transform: none !important;
	}
}
