/* ==========================================================================
   ATLAS — Visual polish layer (dark gaming + RGB)
   Loaded after atlas-dark.css. Purely presentational.
   ========================================================================== */

/* ---------- 1. RGB scroll progress bar ---------- */
#atlas-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 0;
	background: linear-gradient(90deg, #FF0055, #BD00FF, #00D9FF, #00FF85, #FFD500, #FF0055);
	background-size: 300% 100%;
	animation: atlas-rgb-slide 6s linear infinite;
	z-index: 99999;
	pointer-events: none;
	box-shadow: 0 0 14px rgba(189, 0, 255, .65);
	transition: width .08s linear;
}

/* ---------- 2. Hero: cyber grid + vignette + bottom fade ---------- */
body.home .wp-block-cover {
	position: relative;
	box-shadow: inset 0 -110px 110px -70px rgba(8, 9, 12, .96);
}
body.home .wp-block-cover::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
	background-size: 48px 48px, 48px 48px;
	-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 42%, #000 20%, transparent 80%);
	mask-image: radial-gradient(ellipse 70% 60% at 50% 42%, #000 20%, transparent 80%);
	z-index: 1;
}

/* ---------- 3. Fine noise texture over the whole page ---------- */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 9998;
	opacity: .035;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
	background-repeat: repeat;
}

/* ---------- 4. Light sweep on hover (cards + product cards) ---------- */
.atlas-cat-card,
.atlas-step,
.woocommerce ul.products li.product {
	overflow: hidden;
}
.atlas-cat-card::before,
.atlas-step::before,
.woocommerce ul.products li.product::before {
	content: "";
	position: absolute;
	top: 0;
	left: -130%;
	width: 55%;
	height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .07), transparent);
	transform: skewX(-18deg);
	transition: left .6s ease;
	pointer-events: none;
	z-index: 3;
}
.woocommerce ul.products li.product { position: relative; }
.atlas-cat-card:hover::before,
.atlas-step:hover::before,
.woocommerce ul.products li.product:hover::before {
	left: 135%;
}

/* ---------- 5. Body link underline slide ---------- */
.entry-content a:not([class]) {
	text-decoration: none;
	padding-bottom: 1px;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 1px;
	transition: background-size .28s ease, color .2s ease;
}
.entry-content a:not([class]):hover {
	background-size: 100% 1px;
	color: #C7D2FE;
}

/* ---------- 6. Section rhythm + glowing dividers ---------- */
.entry-content > .wp-block-group {
	padding-top: 74px !important;
	padding-bottom: 74px !important;
}
.entry-content > .wp-block-group.atlas-section-bg {
	border-top: 1px solid rgba(124, 58, 237, .16);
	border-bottom: 1px solid rgba(124, 58, 237, .16);
	background-image:
		radial-gradient(ellipse 60% 100% at 15% 0%, rgba(189, 0, 255, .07), transparent 60%),
		radial-gradient(ellipse 60% 100% at 85% 100%, rgba(0, 217, 255, .06), transparent 60%);
	background-color: #0B0D12 !important;
}
@media (max-width: 700px) {
	.entry-content > .wp-block-group { padding-top: 48px !important; padding-bottom: 48px !important; }
}

/* ---------- 7. Typography refinements ---------- */
h1, h2, h3 { letter-spacing: -0.022em; }
.entry-content h2 { font-size: clamp(26px, 3.1vw, 40px); line-height: 1.18; }
.entry-content h3 { font-size: clamp(19px, 2vw, 26px); line-height: 1.25; }
.atlas-mono {
	font-family: "IBM Plex Mono", ui-monospace, monospace !important;
	letter-spacing: .18em !important;
	font-size: 11px !important;
}
.atlas-heading-underline { position: relative; padding-bottom: 14px; }
.atlas-heading-underline::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 58px;
	height: 2px;
	background: linear-gradient(90deg, #FF0055, #BD00FF, #00D9FF);
	box-shadow: 0 0 10px rgba(189, 0, 255, .5);
}

/* ---------- 8. Product card placeholders (no product photos yet) ---------- */
.woocommerce ul.products li.product .woocommerce-LoopProduct-link img,
.woocommerce ul.products li.product img {
	background: linear-gradient(135deg, #14171E 0%, #0B0D12 100%);
	border-radius: 8px;
	aspect-ratio: 8 / 5;
	object-fit: cover;
}
.woocommerce ul.products li.product .price { color: #ffffff !important; }
.woocommerce ul.products li.product .button {
	background: linear-gradient(100deg, #4F46E5, #7C3AED 55%, #4F46E5) !important;
	background-size: 220% 100% !important;
	color: #fff !important;
	border-radius: 0 !important;
}
.woocommerce ul.products li.product .button:hover {
	background-position: 100% 50% !important;
	box-shadow: 0 0 22px rgba(124, 58, 237, .4);
}

/* ---------- 9. Product gallery / summary polish ---------- */
.woocommerce div.product .woocommerce-product-gallery__wrapper {
	border: 1px solid var(--atlas-border, #23272F);
	border-radius: 10px;
	overflow: hidden;
}
.woocommerce div.product .product_title {
	font-family: "Space Grotesk", system-ui, sans-serif;
	letter-spacing: -0.02em;
}
.woocommerce div.product .summary .price {
	font-family: "IBM Plex Mono", monospace;
	letter-spacing: -0.01em;
}

/* ---------- 10. Chips + badges get a subtle RGB edge ---------- */
.atlas-chip {
	background: rgba(124, 58, 237, .13) !important;
	border: 1px solid rgba(124, 58, 237, .4) !important;
	box-shadow: inset 0 0 14px rgba(124, 58, 237, .12);
}
.atlas-trust-badges span {
	border-bottom: 1px dotted rgba(124, 58, 237, .45);
	padding-bottom: 2px;
}

/* ---------- 11. CTA band glow ---------- */
.entry-content > .wp-block-cover.alignfull .wp-block-buttons .atlas-cta .wp-block-button__link {
	box-shadow: 0 0 0 1px rgba(124, 58, 237, .5), 0 10px 34px rgba(79, 70, 229, .35), 0 0 40px rgba(189, 0, 255, .22);
}

/* ---------- 12. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	#atlas-progress { animation: none !important; }
	.atlas-cat-card::before,
	.atlas-step::before,
	.woocommerce ul.products li.product::before { display: none !important; }
}

/* ==========================================================================
   13. Softened corners — rounder buttons, inputs and controls
   ========================================================================== */

.atlas-cz-cta,
a.atlas-cz-cta,
.wp-block-button__link,
.atlas-cta .wp-block-button__link,
.atlas-cta-outline .wp-block-button__link,
.atlas-cta-dark .wp-block-button__link,
.atlas-quiz-btn-inline,
.atlas-cz__reset,
.atlas-gallery__use,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit,
.woocommerce ul.products li.product .button,
.single_add_to_cart_button,
.woocommerce button[name="apply_coupon"],
.woocommerce .checkout-button,
.woocommerce #place_order,
.atlas-footer button,
.atlas-footer input[type="submit"],
.atlas-cz__tab,
.atlas-faq summary {
	border-radius: 10px !important;
}

/* Slightly larger radius for the big CTAs */
.atlas-cz-cta,
a.atlas-cz-cta,
.atlas-cta .wp-block-button__link,
.single_add_to_cart_button,
.woocommerce .checkout-button,
.woocommerce #place_order {
	border-radius: 12px !important;
}

/* Inputs, selects and the quantity box */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .quantity .qty,
.select2-container--default .select2-selection--single,
input[type="text"],
input[type="email"],
input[type="search"],
input[type="number"],
input[type="password"],
textarea,
select,
.atlas-cz__tool input[type="color"] {
	border-radius: 8px !important;
}

/* Size + design tiles in the customizer, and the upload drop zone */
.atlas-cz__size,
.atlas-cz__design,
.atlas-cz__drop {
	border-radius: 12px !important;
}

/* Cards keep a slightly softer radius too */
.atlas-cat-card,
.atlas-step,
.atlas-gallery__item,
.woocommerce ul.products li.product,
.woocommerce div.product .woocommerce-product-gallery__wrapper {
	border-radius: 12px !important;
}

/* Pills stay pill-shaped (they were already round) */
.atlas-gallery__filter,
.atlas-chip {
	border-radius: 999px !important;
}

/* Inner colour-swatch / small icon buttons */
.atlas-cz__design img,
.woocommerce ul.products li.product img {
	border-radius: 9px;
}

/* ==========================================================================
   14. Header: force white text + white icons on the dark bar
   ========================================================================== */

.site-header,
.site-header *:not(.atlas-cart-count):not(.atlas-quiz-btn-inline):not(.atlas-quiz-btn-inline *) {
	color: #ffffff;
}

.site-header a,
.site-header .menu-item > a,
.site-header .main-navigation .menu-item > a,
.site-header .header-navigation .menu-item > a,
.site-header .site-title a,
.site-header .mobile-navigation-toggle,
.site-header .menu-toggle,
.site-header .header-search-toggle,
.site-header .header-button,
.site-header .header-html a,
.atlas-header-actions a,
.atlas-account-btn,
.atlas-cart-btn {
	color: #ffffff !important;
}

/* Inline SVG icons inherit the text colour via currentColor */
.site-header svg,
.atlas-account-btn svg,
.atlas-cart-btn svg,
.mobile-navigation-toggle svg,
.site-header .header-search-toggle svg {
	color: #ffffff !important;
	stroke: currentColor;
}

/* Keep the accent button readable (dark label on the indigo/gradient pill) */
.site-header .atlas-quiz-btn-inline,
.atlas-header-actions .atlas-quiz-btn-inline {
	color: #ffffff !important;
}

/* Hover: slight fade instead of a colour change */
.site-header .menu-item > a:hover,
.atlas-account-btn:hover,
.atlas-cart-btn:hover {
	opacity: .78;
	color: #ffffff !important;
}

/* Dropdown / submenu links stay white on the dark panel */
.main-navigation .sub-menu a,
.main-navigation ul ul a,
.site-header .sub-menu .menu-item > a {
	color: #ffffff !important;
}
.main-navigation .sub-menu a:hover,
.main-navigation ul ul a:hover {
	opacity: .8;
}

/* Cart count badge keeps contrast */
.atlas-cart-count {
	color: #ffffff !important;
	background: #4F46E5 !important;
}

/* Mobile drawer: white text and icons too */
.drawer-content a,
.drawer-content .menu-item > a,
.drawer-content .drawer-nav-drop-wrap a,
.drawer-content svg,
.drawer-header a,
.drawer-header svg {
	color: #ffffff !important;
	stroke: currentColor;
}