/*
Theme Name: 3D Neon Artist
Theme URI: https://example.com/3d-neon-artist
Author:
Author URI:
Description: Тёмная кибер-панк / неоновая тема-лендинг для 3D artist. Включает готовые блочные паттерны ("3D Neon Landing" в редакторе блоков) для секций Hero, Marquee, Linktree, About, Previews, Subscribe и Contact, редактируемые без кода. Мультиязычность — через Polylang.
Version: 1.0.2
Requires at least: 5.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: 3d-neon-artist
*/

:root{
	--bg-black:#0a0a0c;
	--bg-graphite:#121216;
	--bg-panel:#16161b;
	--neon-blue:#00d2ff;
	--neon-blue-soft:rgba(0,210,255,0.35);
	--neon-pink:#ff007f;
	--neon-pink-soft:rgba(255,0,127,0.35);
	--text-body:#aebfc7;
	--text-dim:#7c8a92;
	--text-heading:#eaf7fb;
	--border-soft:rgba(0,210,255,0.18);
	--header-h:72px;
	--header-h-mobile:64px;
	--radius-lg:16px;
	--radius-md:12px;
	--radius-sm:8px;
	--ease:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
	margin:0;
	padding:0;
	background:var(--bg-black);
	background-image:
		radial-gradient(ellipse 80% 50% at 50% -10%, rgba(0,210,255,0.10), transparent 60%),
		radial-gradient(ellipse 60% 40% at 85% 15%, rgba(255,0,127,0.08), transparent 60%);
	background-attachment:fixed;
	color:var(--text-body);
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	line-height:1.6;
	-webkit-font-smoothing:antialiased;
	overflow-x:hidden;
}

img,svg{ max-width:100%; }

/* WordPress wraps some blocks' content in an extra "__inner-container" div
   (confirmed on Group; other blocks such as Query may use the same pattern
   with a different prefix) whenever no explicit "layout" attribute is set.
   That wrapper breaks every custom flex/grid class below (marquee, grids,
   scroll rows, tabs, etc.) because the real children end up one level
   deeper than the flex/grid parent expects. Matched by substring so it
   catches any block's inner-container, not just Group's. */
[class*="__inner-container"]{ display:contents !important; }

/* WordPress's built-in image lightbox defaults its dimming backdrop ("scrim")
   to white — that's meant to be re-themed via theme.json, which this classic
   theme doesn't use, so we override it here to match the dark design. */
.wp-lightbox-overlay .scrim{ background-color:var(--bg-black) !important; opacity:0.92 !important; }

.wp-lightbox-overlay .close-button{ color:var(--neon-blue); }

.wp-lightbox-overlay .close-button:hover{ color:var(--neon-pink); }

a{ color:var(--neon-blue); text-decoration:none; transition:color 0.3s var(--ease); }

a:hover,a:focus-visible{ color:var(--neon-pink); }

ul{ list-style:none; margin:0; padding:0; }

button{ font-family:inherit; cursor:pointer; }

.neon-text{
	color:var(--neon-blue);
	text-shadow:0 0 6px var(--neon-blue-soft), 0 0 24px rgba(0,210,255,0.25);
}

.container{
	width:100%;
	max-width:1120px;
	margin:0 auto;
	padding:0 20px;
}

/* ---------- Site chrome (header.php / footer.php) ---------- */

.site-header{
	position:sticky;
	top:0;
	z-index:1000;
	height:var(--header-h-mobile);
	display:flex;
	align-items:center;
	background:rgba(10,10,12,0.72);
	backdrop-filter:blur(10px);
	-webkit-backdrop-filter:blur(10px);
	border-bottom:1px solid var(--border-soft);
}

@media (min-width:768px){
	.site-header{ height:var(--header-h); }
}

.site-header .header-inner{
	width:100%;
	max-width:1200px;
	margin:0 auto;
	padding:0 20px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
}

.site-branding a{
	font-size:17px;
	font-weight:800;
	letter-spacing:0.4px;
	color:var(--text-heading);
}

.site-branding a:hover{ color:var(--neon-pink); }

.site-nav ul{
	display:flex;
	gap:6px;
	flex-wrap:wrap;
}

.site-nav a{
	display:inline-block;
	padding:8px 12px;
	font-size:14px;
	color:var(--text-body);
	border-radius:var(--radius-sm);
}

.site-nav a:hover,.site-nav a:focus-visible{
	color:var(--neon-blue);
	background:rgba(0,210,255,0.08);
}

.header-controls{
	display:flex;
	align-items:center;
	gap:10px;
	flex-shrink:0;
}

/* ---------- Social icons (header, next to the language switcher) ---------- */
/* Managed entirely via Appearance -> Menus (theme location "Social Icons
   (header)") — no code changes needed to add/remove/reorder them. Each icon
   auto-detects a favicon for its link's domain via nav.js (same system as
   the on-page Linktree buttons). */

.social-nav-list{
	display:flex;
	align-items:center;
	gap:8px;
	list-style:none;
	margin:0;
	padding:0;
}

.social-nav-list li{ margin:0; }

.social-nav-list a{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	width:36px;
	height:36px;
	border-radius:50%;
	background:rgba(255,255,255,0.04);
	border:1px solid var(--border-soft);
	transition:border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}

.social-nav-list a:hover{
	border-color:var(--neon-pink);
	box-shadow:0 0 10px rgba(255,0,127,0.35);
	transform:translateY(-1px);
}

/* Link text stays for accessibility (screen readers) but isn't shown —
   the icon carries the meaning visually. */
.social-nav-label{
	position:absolute;
	width:1px;
	height:1px;
	padding:0;
	margin:-1px;
	overflow:hidden;
	clip:rect(0,0,0,0);
	white-space:nowrap;
	border:0;
}

.social-nav-icon{
	width:16px;
	height:16px;
	object-fit:contain;
	display:block;
	pointer-events:none;
	border-radius:3px;
}

.site-main{
	min-height:60vh;
	padding:64px 0;
}

.site-main-page{ margin:0; }

.site-footer{
	padding:32px 20px 40px;
	text-align:center;
	border-top:1px solid var(--border-soft);
}

.site-footer p{
	margin:0;
	font-size:13px;
	color:var(--text-dim);
	letter-spacing:0.3px;
}

/* ---------- Blog index / archive cards (index.php) ---------- */

.post-list{
	display:grid;
	grid-template-columns:1fr;
	gap:24px;
	max-width:760px;
	margin:0 auto;
}

.post-card{
	background:var(--bg-panel);
	border:1px solid var(--border-soft);
	border-radius:var(--radius-lg);
	padding:28px 26px;
	transition:border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}

.post-card:hover{
	border-color:var(--neon-pink);
	box-shadow:0 0 24px rgba(255,0,127,0.16);
	transform:translateY(-3px);
}

.post-card .post-title{
	margin:0 0 10px;
	font-size:22px;
	font-weight:700;
}

.post-card .post-title a{ color:var(--text-heading); }

.post-card .post-title a:hover{ color:var(--neon-blue); }

.post-card .post-meta{
	font-size:12px;
	letter-spacing:0.5px;
	color:var(--text-dim);
	margin:0 0 14px;
	text-transform:uppercase;
}

.post-card .post-excerpt{
	font-size:15px;
	color:var(--text-body);
	margin:0 0 16px;
}

.post-card .read-more{
	display:inline-block;
	font-size:13px;
	font-weight:700;
	letter-spacing:0.4px;
	color:var(--neon-blue);
	border:1px solid var(--neon-blue);
	padding:8px 16px;
	border-radius:var(--radius-sm);
	transition:background 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.post-card .read-more:hover,.post-card .read-more:focus-visible{
	background:var(--neon-pink);
	border-color:var(--neon-pink);
	color:#0a0a0c;
	box-shadow:0 0 16px rgba(255,0,127,0.4);
}

.no-posts{
	text-align:center;
	color:var(--text-dim);
	font-size:15px;
}

.pagination{
	display:flex;
	justify-content:center;
	gap:10px;
	margin-top:36px;
}

.pagination a,.pagination span{
	padding:8px 14px;
	border:1px solid var(--border-soft);
	border-radius:var(--radius-sm);
	font-size:13px;
	color:var(--text-body);
}

.pagination a:hover{
	border-color:var(--neon-pink);
	color:var(--neon-pink);
}

.pagination .current{
	color:var(--neon-blue);
	border-color:var(--neon-blue);
}

/* ---------- Single post (single.php) ---------- */

.site-main-single .container{ max-width:760px; }

/* Named "-article", NOT "single-post" — WordPress's own body_class() already
   adds a body class literally called "single-post" on every single-post
   page. Reusing that exact name here made this rule's padding/background/
   border apply to <body> as well as the intended <article>, which shoved
   the whole page (including the sticky header) 32px in from every edge —
   this is the "header floating in the air" bug reported 2026-08-14. Keep
   this prefixed distinctly from any WordPress core body-class name. */
.single-post-article{
	background:var(--bg-panel);
	border:1px solid var(--border-soft);
	border-radius:var(--radius-lg);
	padding:32px;
	margin-bottom:24px;
}

.single-post-thumb{
	margin:-32px -32px 24px;
	border-radius:var(--radius-lg) var(--radius-lg) 0 0;
	overflow:hidden;
}

.single-post-thumb img{
	width:100%;
	height:auto;
	display:block;
}

.single-post-title{
	margin:0 0 10px;
	font-size:32px;
	font-weight:700;
	color:var(--text-heading);
}

.single-post-meta{
	font-size:12px;
	letter-spacing:0.5px;
	text-transform:uppercase;
	color:var(--text-dim);
	margin:0 0 24px;
}

.single-post-content{
	font-size:16px;
	color:var(--text-body);
	line-height:1.7;
}

.single-post-content p{ margin:0 0 1.2em; }
.single-post-content img{ max-width:100%; height:auto; border-radius:var(--radius-md); }
.single-post-content a{ color:var(--neon-blue); }
.single-post-content a:hover{ color:var(--neon-pink); }

/* Embeds (VideoPress, YouTube, etc.) sometimes carry hardcoded width/height
   HTML attributes far wider than a phone screen — without this, that shows
   as a horizontal overflow / layout jump before any resize script kicks in. */
.single-post-content iframe,
.single-post-content embed,
.single-post-content object{ max-width:100%; }

.screen-reader-text{
	position:absolute;
	width:1px;
	height:1px;
	padding:0;
	margin:-1px;
	overflow:hidden;
	clip:rect(0,0,0,0);
	white-space:nowrap;
	border:0;
}

.post-navigation{
	max-width:760px;
	margin:0 auto 24px;
}

.post-navigation .nav-links{
	display:flex;
	justify-content:space-between;
	gap:16px;
}

.post-navigation .nav-previous,
.post-navigation .nav-next{
	flex:1 1 0;
	min-width:0;
}

.post-navigation .nav-next{ text-align:right; }

.post-navigation a{
	display:block;
	padding:12px 16px;
	background:var(--bg-panel);
	border:1px solid var(--border-soft);
	border-radius:var(--radius-md);
	color:var(--text-body);
	font-size:13px;
	text-decoration:none;
	transition:border-color 0.3s var(--ease), color 0.3s var(--ease);
}

.post-navigation a:hover{
	border-color:var(--neon-blue);
	color:var(--neon-blue);
}

.single-post-nav-title{
	display:block;
	margin-top:4px;
	font-size:15px;
	font-weight:700;
	color:var(--text-heading);
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.post-navigation a:hover .single-post-nav-title{ color:var(--neon-blue); }

.single-post-back{ text-align:center; }

.single-post-back a{
	display:inline-block;
	font-size:13px;
	font-weight:700;
	letter-spacing:0.4px;
	color:var(--neon-blue);
	border:1px solid var(--neon-blue);
	padding:8px 18px;
	border-radius:var(--radius-sm);
	transition:background 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.single-post-back a:hover{
	background:var(--neon-pink);
	border-color:var(--neon-pink);
	color:#0a0a0c;
	box-shadow:0 0 16px rgba(255,0,127,0.4);
}

/* ---------- Gutenberg patterns: shared section wrappers ---------- */

.neon-section{
	max-width:1120px;
	margin:0 auto;
	padding:48px 20px;
}

.neon-section.neon-narrow{ max-width:760px; }

.neon-heading{
	font-size:clamp(28px,5vw,42px);
	font-weight:700;
	text-align:center;
	letter-spacing:0.5px;
	margin:0 0 16px;
	color:var(--neon-blue);
	text-shadow:0 0 6px var(--neon-blue-soft), 0 0 24px rgba(0,210,255,0.25);
}

.neon-subtitle{
	max-width:560px;
	margin:0 auto 28px;
	color:var(--text-dim);
	font-size:16px;
}

.neon-frame{
	display:block;
	width:100%;
	height:auto;
	border-radius:var(--radius-lg);
	border:1px solid var(--border-soft);
	box-shadow:0 0 24px rgba(0,210,255,0.12);
	margin:0 auto;
}

/* ---------- Hero pattern ---------- */

.neon-hero{
	text-align:center;
	display:flex !important;
	flex-direction:column !important;
	align-items:center;
	gap:14px !important;
	padding-top:64px;
}

.neon-eyebrow{
	font-size:12px;
	font-weight:700;
	letter-spacing:3px;
	color:var(--neon-pink);
	text-shadow:0 0 10px var(--neon-pink-soft);
	margin:0;
}

.neon-hero-title{
	font-size:clamp(30px,7vw,56px);
	font-weight:800;
	line-height:1.15;
	margin:0;
	color:var(--text-heading);
}

.neon-accent{
	color:var(--neon-blue);
	text-shadow:0 0 10px var(--neon-blue-soft), 0 0 30px rgba(0,210,255,0.3);
}

.neon-hero-subtitle{
	font-size:clamp(15px,2.4vw,18px);
	color:var(--text-dim);
	max-width:520px;
	margin:0 auto;
}

/* ---------- Marquee pattern ---------- */

.neon-marquee{
	max-width:1120px;
	margin:0 auto;
	overflow:hidden;
	-webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.neon-marquee-track{
	display:flex !important;
	width:max-content;
	gap:16px !important;
	padding:12px 8px;
	will-change:transform;
	backface-visibility:hidden;
}

.neon-marquee-item{
	flex-shrink:0 !important;
	width:150px;
	height:210px;
	margin:0 !important;
	border-radius:var(--radius-md);
	border:1px solid var(--border-soft);
	overflow:hidden;
	transition:border-color 0.3s var(--ease);
}

/* transform on this element is owned entirely by marquee.js (continuous
   per-frame positioning) — a CSS hover-scale here would either never show
   (JS overwrites it every frame) or fight the position/lightbox transforms,
   so hover feedback is limited to the border color. */
.neon-marquee-item:hover{
	border-color:var(--neon-pink);
}

.neon-marquee-item img{
	width:150px;
	height:210px;
	object-fit:cover;
	display:block;
}

@media (min-width:768px){
	.neon-marquee-item,
	.neon-marquee-item img{ width:190px; height:260px; }
}

/* ---------- Linktree buttons ---------- */

.wp-block-buttons.neon-linktree{
	display:flex !important;
	flex-direction:column !important;
	max-width:400px;
	margin:0 auto;
	gap:14px !important;
}

.wp-block-buttons.neon-linktree .wp-block-button{ width:100% !important; }

.wp-block-button.neon-link .wp-block-button__link{
	position:relative;
	display:block !important;
	width:100%;
	padding:15px 52px;
	background:var(--bg-panel);
	border:1px solid var(--border-soft);
	border-radius:var(--radius-md);
	color:var(--text-heading);
	font-size:15px;
	font-weight:600;
	letter-spacing:0.3px;
	text-align:center;
	transition:box-shadow 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}

.wp-block-button.neon-link .wp-block-button__link:hover{
	border-color:var(--neon-pink);
	box-shadow:0 0 12px rgba(255,0,127,0.35), 0 0 32px rgba(255,0,127,0.15), inset 0 0 12px rgba(255,0,127,0.08);
	color:var(--neon-blue);
	transform:translateY(-2px);
}

/* Icon pinned to the left edge, text truly centered across the full button
   width (Linktree-style) rather than icon+text centered together as a pair. */
.wp-block-button.neon-link .wp-block-button__link::before{
	content:'';
	position:absolute;
	left:20px;
	top:50%;
	transform:translateY(-50%);
	width:22px;
	height:22px;
	background-color:var(--neon-blue);
	-webkit-mask-size:contain;
	mask-size:contain;
	-webkit-mask-repeat:no-repeat;
	mask-repeat:no-repeat;
	-webkit-mask-position:center;
	mask-position:center;
	transition:background-color 0.3s var(--ease);
}

.wp-block-button.neon-link .wp-block-button__link:hover::before{ background-color:var(--neon-pink); }

/* Once a real destination URL is set, the auto-detected site favicon (inserted
   by nav.js as an <img>) replaces the generic brand mask-icon entirely. */
.wp-block-button.neon-link .wp-block-button__link:has(.neon-gallery-link-favicon)::before{
	display:none;
}

/* If the auto-detected favicon fails to load (eg. blocked by an ad/tracker
   blocker), nav.js adds this class so a neutral "external link" icon shows
   instead of the button's original template brand icon (which may no longer
   match if the link was repurposed, eg. Patreon slot reused for Google). */
.wp-block-button.neon-link .wp-block-button__link.neon-favicon-fallback::before{
	-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") !important;
	mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") !important;
}

.wp-block-button.neon-link .wp-block-button__link .neon-gallery-link-favicon{
	position:absolute;
	left:20px;
	top:50%;
	transform:translateY(-50%);
	width:20px;
	height:20px;
}

.neon-link--patreon .wp-block-button__link::before{
	-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5 V16.5 M8.5 10 h7' stroke-linecap='round'/%3E%3C/svg%3E");
	mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5 V16.5 M8.5 10 h7' stroke-linecap='round'/%3E%3C/svg%3E");
}

.neon-link--fansly .wp-block-button__link::before{
	-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='6'/%3E%3Cpath d='M8.5 8.5 V15.5 M8.5 8.5 H14 a2.5 2.5 0 0 1 0 5 H8.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='6'/%3E%3Cpath d='M8.5 8.5 V15.5 M8.5 8.5 H14 a2.5 2.5 0 0 1 0 5 H8.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.neon-link--x .wp-block-button__link::before{
	-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 4 L20 20 M20 4 L4 20'/%3E%3C/svg%3E");
	mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 4 L20 20 M20 4 L4 20'/%3E%3C/svg%3E");
}

.neon-link--discord .wp-block-button__link::before{
	-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='6' width='17' height='12' rx='5' fill='none'/%3E%3Ccircle cx='9' cy='12' r='1'/%3E%3Ccircle cx='15' cy='12' r='1'/%3E%3C/svg%3E");
	mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='6' width='17' height='12' rx='5' fill='none'/%3E%3Ccircle cx='9' cy='12' r='1'/%3E%3Ccircle cx='15' cy='12' r='1'/%3E%3C/svg%3E");
}

.neon-link--generic .wp-block-button__link::before{
	-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 15 L15 9 M10 6 h5 a3 3 0 0 1 3 3 v0 a3 3 0 0 1 -3 3 h-2 M14 18 h-5 a3 3 0 0 1 -3 -3 v0 a3 3 0 0 1 3 -3 h2'/%3E%3C/svg%3E");
	mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 15 L15 9 M10 6 h5 a3 3 0 0 1 3 3 v0 a3 3 0 0 1 -3 3 h-2 M14 18 h-5 a3 3 0 0 1 -3 -3 v0 a3 3 0 0 1 3 -3 h2'/%3E%3C/svg%3E");
}

/* "Neon: Link Button (custom icon)" pattern — a Group wrapping the button
   plus a normal, user-replaceable Image block used as the icon. The image
   sits visually where the auto/mask icon would, with pointer-events:none so
   clicks still reach the button underneath; the button's own icon systems
   are hidden since this pattern supplies its own. */
.neon-link-wrap{
	position:relative;
	width:400px;
	max-width:100%;
	margin:0 auto 14px;
}

.neon-link-wrap .wp-block-button.neon-link{ width:100%; margin:0; }

.neon-link-wrap .wp-block-button.neon-link .wp-block-button__link::before{ display:none; }

.neon-link-wrap .neon-link-custom-icon{
	position:absolute;
	left:20px;
	top:50%;
	transform:translateY(-50%);
	width:22px;
	height:22px;
	margin:0;
	pointer-events:none;
	border-radius:4px;
	overflow:hidden;
	z-index:2;
}

.neon-link-wrap .neon-link-custom-icon img{
	width:100%;
	height:100%;
	object-fit:contain;
	display:block;
}

/* ---------- Previews grid pattern ---------- */

.neon-previews-grid{
	display:grid !important;
	grid-template-columns:repeat(2,1fr) !important;
	gap:16px !important;
}

@media (min-width:600px){
	.neon-previews-grid{ grid-template-columns:repeat(3,1fr) !important; gap:20px !important; }
}

.neon-preview-tile{
	position:relative;
	border-radius:var(--radius-lg);
	overflow:hidden;
	border:1px solid var(--border-soft);
	transition:border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.neon-preview-tile:hover{
	border-color:var(--neon-blue);
	transform:translateY(-4px);
}

.neon-preview-image{ margin:0; aspect-ratio:3/4; }

.neon-preview-image img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
	aspect-ratio:3/4;
}

.neon-locked-label{
	position:absolute;
	inset:0;
	display:flex !important;
	align-items:center;
	justify-content:center;
	margin:0 !important;
	background:rgba(10,10,12,0.55);
	backdrop-filter:blur(2px);
	color:var(--text-heading);
	font-size:12px;
	letter-spacing:1px;
	opacity:0;
	transition:opacity 0.3s var(--ease);
}

.neon-preview-tile:hover .neon-locked-label{ opacity:1; }

.neon-preview-caption{
	position:absolute;
	left:10px; bottom:10px;
	margin:0;
	font-size:12px;
	color:var(--text-dim);
}

/* ---------- Subscribe tiers pattern ---------- */

.neon-tiers-grid{
	display:grid !important;
	grid-template-columns:1fr !important;
	gap:20px !important;
	max-width:1120px;
	margin:0 auto;
}

@media (min-width:768px){
	.neon-tiers-grid{ grid-template-columns:repeat(3,1fr) !important; align-items:stretch; }
}

.neon-tier{
	position:relative;
	background:var(--bg-panel);
	border:1px solid var(--border-soft);
	border-radius:var(--radius-lg);
	padding:28px 24px;
	text-align:center;
	transition:border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}

.neon-tier:hover{
	border-color:var(--neon-pink);
	box-shadow:0 0 24px rgba(255,0,127,0.18);
	transform:translateY(-4px);
}

.neon-tier--featured{ border-color:var(--neon-blue); }

.neon-tier-badge{
	display:inline-block;
	position:absolute;
	top:-12px; left:50%;
	transform:translateX(-50%);
	background:var(--neon-blue);
	color:#06090a;
	font-size:11px;
	font-weight:700;
	letter-spacing:1px;
	padding:4px 12px;
	border-radius:999px;
	box-shadow:0 0 12px var(--neon-blue-soft);
	margin:0;
}

.neon-tier h3{
	margin:6px 0 4px;
	font-size:19px;
	color:var(--text-heading);
}

.neon-tier-price{
	font-size:34px;
	font-weight:800;
	color:var(--neon-blue);
	margin:8px 0 20px;
	text-shadow:0 0 12px var(--neon-blue-soft);
}

ul.neon-tier-list{
	display:flex !important;
	flex-direction:column !important;
	gap:10px !important;
	margin:0 0 24px !important;
	padding:0 !important;
	list-style:none;
	text-align:left;
}

.neon-tier-list li{
	font-size:14px;
	color:var(--text-body);
	padding-left:22px;
	position:relative;
}

.neon-tier-list li::before{
	content:"";
	position:absolute;
	left:0; top:6px;
	width:8px; height:8px;
	border-radius:50%;
	background:var(--neon-pink);
	box-shadow:0 0 6px var(--neon-pink-soft);
}

.wp-block-button.neon-tier-button .wp-block-button__link{
	display:inline-block;
	padding:12px 20px;
	border-radius:var(--radius-md);
	border:1px solid var(--neon-blue);
	background:transparent;
	color:var(--neon-blue);
	font-weight:700;
	font-size:14px;
	letter-spacing:0.4px;
	transition:background 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.wp-block-button.neon-tier-button .wp-block-button__link:hover{
	background:var(--neon-pink);
	border-color:var(--neon-pink);
	color:#0a0a0c;
	box-shadow:0 0 18px rgba(255,0,127,0.45);
}

/* ---------- Contact / form pattern ---------- */

.neon-form-placeholder{
	border:1px dashed var(--border-soft);
	border-radius:var(--radius-md);
	padding:20px;
	color:var(--text-dim);
	font-size:14px;
}

.neon-form input[type="text"],
.neon-form input[type="email"],
.neon-form input[type="tel"],
.neon-form input[type="url"],
.neon-form textarea,
.neon-form select{
	width:100%;
	background:var(--bg-panel);
	border:1px solid var(--border-soft);
	border-radius:var(--radius-md);
	padding:13px 16px;
	font-size:15px;
	color:var(--text-heading);
	font-family:inherit;
	margin-bottom:16px;
	transition:border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.neon-form textarea{ min-height:130px; resize:vertical; }

.neon-form input:focus,
.neon-form textarea:focus,
.neon-form select:focus{
	outline:none;
	border-color:var(--neon-pink);
	box-shadow:0 0 0 3px rgba(255,0,127,0.15), 0 0 14px rgba(255,0,127,0.25);
}

.neon-form button[type="submit"],
.neon-form input[type="submit"]{
	display:block;
	margin:8px auto 0;
	padding:14px 36px;
	border-radius:var(--radius-md);
	border:1px solid var(--neon-blue);
	background:transparent;
	color:var(--neon-blue);
	font-weight:700;
	font-size:15px;
	letter-spacing:0.5px;
	cursor:pointer;
	transition:background 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.neon-form button[type="submit"]:hover,
.neon-form input[type="submit"]:hover{
	background:var(--neon-pink);
	border-color:var(--neon-pink);
	color:#0a0a0c;
	box-shadow:0 0 20px rgba(255,0,127,0.45);
}

/* ---------- Latest Updates (Query Loop) pattern ---------- */
/* A compact, static (non-animated — unlike .neon-marquee) horizontal strip
   of FIXED-width news pills, meant to sit near the top of the page so
   visitors notice updates immediately without a tall block of cards pushing
   content down. Predictable single row, scrolls if it overflows, older
   items fade into the edge (same idea as .neon-marquee's edge mask). */

.neon-updates .wp-block-post-template{
	display:flex !important;
	flex-wrap:nowrap !important;
	gap:12px !important;
	max-width:1120px;
	margin:0 auto;
	padding:10px 4px 16px;
	list-style:none;
	overflow-x:auto;
	scroll-snap-type:x proximity;
	-webkit-overflow-scrolling:touch;
	scrollbar-color:var(--neon-blue) var(--bg-panel);
	scrollbar-width:thin;
	-webkit-mask-image:linear-gradient(90deg, #000, #000 92%, transparent);
	mask-image:linear-gradient(90deg, #000, #000 92%, transparent);
}

.neon-updates .wp-block-post-template::-webkit-scrollbar{ height:6px; }
.neon-updates .wp-block-post-template::-webkit-scrollbar-track{ background:var(--bg-panel); border-radius:4px; }
.neon-updates .wp-block-post-template::-webkit-scrollbar-thumb{ background:var(--neon-blue); border-radius:4px; }

.neon-updates .wp-block-post-template > *{
	list-style:none;
	margin:0;
	padding:0;
	flex:0 0 auto;
	scroll-snap-align:start;
}

.neon-post-card{
	position:relative;
	background:var(--bg-panel);
	border:1px solid var(--border-soft);
	border-radius:999px;
	padding:8px 18px;
	display:flex !important;
	flex-direction:row !important;
	align-items:center;
	gap:10px !important;
	width:240px;
	box-sizing:border-box;
	transition:border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}

.neon-post-card:hover{
	border-color:var(--neon-pink);
	box-shadow:0 0 16px rgba(255,0,127,0.16);
	transform:translateY(-2px);
}

/* Newest item (leftmost, since the query orders desc by date) gets an
   explicit "NEW" badge instead of relying on a visitor to read and compare
   dates (which are also ambiguous across locales, eg. 14/08 vs 08/14). */
.neon-updates .wp-block-post-template > *:first-child .neon-post-card{
	border-color:var(--neon-blue);
	box-shadow:0 0 14px rgba(0,210,255,0.25);
}

.neon-updates .wp-block-post-template > *:first-child .neon-post-card::before{
	content:'NEW';
	position:absolute;
	top:-9px;
	left:14px;
	background:var(--neon-blue);
	color:#0a0a0c;
	font-size:9px;
	font-weight:800;
	letter-spacing:0.5px;
	padding:2px 7px;
	border-radius:999px;
}

.neon-post-date,
.neon-post-date time{
	font-size:11px;
	letter-spacing:0.5px;
	text-transform:uppercase;
	color:var(--text-dim);
	margin:0;
	white-space:nowrap;
	flex:0 0 auto;
}

.neon-post-title{
	margin:0;
	font-size:14px;
	font-weight:600;
	flex:1 1 auto;
	min-width:0;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.neon-post-title a{ color:var(--text-heading); }

.neon-post-title a:hover{ color:var(--neon-blue); }

/* Defensive: hides leftover excerpt/read-more text from a "Latest Updates"
   block inserted before this compact-ribbon redesign — those two blocks were
   dropped from the pattern, but content already on the page won't update
   until the block is deleted and re-inserted, and unstyled leftover text
   fragments inside a fixed-width pill look broken in the meantime. */
.neon-post-excerpt,
.neon-post-readmore{ display:none !important; }

.neon-updates .wp-block-query-pagination{
	display:flex !important;
	justify-content:center;
	gap:10px !important;
	margin-top:20px;
}

.neon-updates-viewall .wp-block-button__link{
	padding:8px 18px !important;
	font-size:12px !important;
}

/* The ribbon and its "view all" button belong together visually — override
   WordPress's default block-to-block spacing so they sit close, instead of
   the same large gap used between unrelated sections. */
.neon-updates{ margin-bottom:0 !important; }
.neon-updates + .wp-block-buttons{ margin-top:8px !important; }

/* This section sits right under the marquee ribbon with nothing between —
   its top padding only needs to clear the marquee, not the full generic
   .neon-section spacing (which other sections, eg. Hero, still use). */
.neon-section:has(.neon-updates){ padding-top:16px; }

/* ---------- Subscriber gallery pattern ---------- */

.neon-gallery-list{
	display:flex !important;
	flex-direction:column !important;
	gap:16px !important;
	max-width:820px;
	margin:0 auto;
}

.neon-gallery-row{
	display:flex !important;
	align-items:center;
	gap:18px !important;
	background:var(--bg-panel);
	border:1px solid var(--border-soft);
	border-radius:var(--radius-md);
	padding:16px 20px;
	transition:border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}

.neon-gallery-row:hover{
	border-color:var(--neon-blue);
	box-shadow:0 0 20px rgba(0,210,255,0.14);
	transform:translateY(-2px);
}

.neon-gallery-thumb{
	flex-shrink:0 !important;
	width:72px !important;
	height:72px !important;
	max-width:72px !important;
	margin:0 !important;
	border-radius:var(--radius-sm);
	overflow:hidden;
	border:1px solid var(--border-soft);
}

.neon-gallery-thumb img{
	width:72px !important;
	height:72px !important;
	max-width:72px !important;
	object-fit:cover;
	display:block;
}

.neon-gallery-info{ flex:1 1 auto !important; min-width:0; }

.neon-gallery-title{
	margin:0 0 4px;
	font-size:16px;
	color:var(--text-heading);
}

.neon-gallery-desc{
	margin:0;
	font-size:13px;
	color:var(--text-dim);
}

.wp-block-buttons.neon-gallery-actions{ flex-shrink:0 !important; margin:0 !important; }

.wp-block-button.neon-gallery-link .wp-block-button__link{
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:10px 20px;
	border-radius:var(--radius-sm);
	border:1px solid var(--neon-blue);
	background:transparent;
	color:var(--neon-blue);
	font-weight:700;
	font-size:13px;
	letter-spacing:0.3px;
	white-space:nowrap;
	transition:background 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.wp-block-button.neon-gallery-link .wp-block-button__link:hover{
	background:var(--neon-pink);
	border-color:var(--neon-pink);
	color:#0a0a0c;
	box-shadow:0 0 16px rgba(255,0,127,0.4);
}

.neon-gallery-link-favicon{
	width:16px;
	height:16px;
	flex-shrink:0;
	border-radius:3px;
	background:#fff;
	object-fit:contain;
}

@media (max-width:600px){
	.neon-gallery-row{ flex-wrap:wrap; }
	.neon-gallery-thumb{ width:56px; height:56px; }
	.neon-gallery-thumb img{ width:56px; height:56px; }
}

/* ---------- Login gate pattern + Discord Protect plugin buttons ---------- */

.neon-login-panel{
	background:var(--bg-panel);
	border:1px solid var(--border-soft);
	border-radius:var(--radius-lg);
	padding:40px 32px;
	text-align:center;
}

.neon-login-panel p{ color:var(--text-body); }

.dp-provider-button,
.dp-login-button{
	border-radius:var(--radius-md) !important;
	box-shadow:0 0 0 rgba(0,0,0,0) !important;
	transition:box-shadow 0.3s var(--ease), transform 0.3s var(--ease) !important;
}

.dp-provider-button:hover,
.dp-login-button:hover{
	box-shadow:0 0 18px rgba(255,0,127,0.45) !important;
	transform:translateY(-2px);
}

.dp-user-control{
	background:var(--bg-panel);
	border:1px solid var(--border-soft);
	border-radius:var(--radius-md);
	color:var(--text-body) !important;
}

.dp-user-control .dp-user-info{ color:var(--text-heading) !important; }

.dp-user-control .dp-logout-btn{
	background:transparent !important;
	border:1px solid var(--neon-blue) !important;
	color:var(--neon-blue) !important;
}

.dp-user-control .dp-logout-btn:hover{
	background:var(--neon-pink) !important;
	border-color:var(--neon-pink) !important;
	color:#0a0a0c !important;
}

.dp-protected-banner{
	background:var(--bg-panel) !important;
	border:1px solid var(--border-soft) !important;
	color:var(--text-body) !important;
	border-radius:var(--radius-md) !important;
}

.dp-protected-banner a{ color:var(--neon-blue) !important; }

/* ---------- Gallery tabs (Art / Image Sets / Animations) ---------- */

.neon-tabs{ max-width:1120px; }

.neon-tab-radio{
	position:absolute;
	opacity:0;
	width:1px;
	height:1px;
	pointer-events:none;
}

.neon-tab-bar{
	position:relative;
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	gap:10px;
	margin:0 0 40px;
}

.neon-tab-btn{
	display:inline-block;
	cursor:pointer;
	padding:10px 22px;
	border:1px solid var(--border-soft);
	border-radius:999px;
	color:var(--text-body);
	font-weight:700;
	font-size:14px;
	letter-spacing:0.3px;
	-webkit-user-select:none;
	user-select:none;
	transition:border-color 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.neon-tab-radio:focus-visible + .neon-tab-btn,
.neon-tab-bar label:hover{
	border-color:var(--neon-blue);
	color:var(--neon-blue);
}

.neon-tab-bar:has(#tab-art:checked) label[for="tab-art"],
.neon-tab-bar:has(#tab-sets:checked) label[for="tab-sets"],
.neon-tab-bar:has(#tab-anim:checked) label[for="tab-anim"]{
	border-color:var(--neon-pink);
	color:var(--neon-blue);
	box-shadow:0 0 14px rgba(255,0,127,0.35);
}

.neon-tab-panel{ display:none !important; }

.neon-tabs:has(#tab-art:checked) .neon-tab-panel--art,
.neon-tabs:has(#tab-sets:checked) .neon-tab-panel--sets,
.neon-tabs:has(#tab-anim:checked) .neon-tab-panel--anim{
	display:block !important;
}

.neon-batch{
	margin-bottom:32px;
	padding:28px 24px 32px;
	background:var(--bg-panel);
	border:1px solid var(--border-soft);
	border-radius:var(--radius-lg);
	transition:border-color 0.3s var(--ease);
}

.neon-batch:hover{ border-color:var(--neon-blue); }

.neon-batch:last-child{ margin-bottom:0; }

.neon-batch-title{
	margin:0 0 18px;
	font-size:19px;
	color:var(--text-heading);
	text-align:center;
}

.neon-scroll-row{
	display:flex !important;
	gap:14px !important;
	overflow-x:auto;
	padding:10px 4px 16px;
	margin-bottom:20px;
	scroll-snap-type:x proximity;
	-webkit-overflow-scrolling:touch;
	scrollbar-color:var(--neon-blue) var(--bg-panel);
	scrollbar-width:thin;
}

.neon-scroll-row::-webkit-scrollbar{ height:6px; }

.neon-scroll-row::-webkit-scrollbar-track{ background:var(--bg-panel); border-radius:4px; }

.neon-scroll-row::-webkit-scrollbar-thumb{ background:var(--neon-blue); border-radius:4px; }

.neon-scroll-thumb{
	flex:0 0 auto !important;
	width:170px;
	margin:0 !important;
	scroll-snap-align:start;
}

.neon-scroll-thumb img{
	width:170px;
	height:220px;
	object-fit:cover;
	display:block;
	border-radius:var(--radius-md);
	border:1px solid var(--border-soft);
	cursor:zoom-in;
	transition:border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.neon-scroll-thumb:hover img{
	border-color:var(--neon-pink);
	transform:scale(1.06);
}

.wp-lightbox-overlay .neon-scroll-thumb:hover img{
	transform:none;
}

.neon-scroll-thumb figcaption{
	margin-top:8px;
	text-align:center;
	font-size:12px;
	color:var(--text-dim);
}

@media (min-width:768px){
	.neon-scroll-thumb,
	.neon-scroll-thumb img{ width:200px; }
	.neon-scroll-thumb img{ height:260px; }
}

/* ---------- Header: logo, burger, language switcher ---------- */

.site-branding .custom-logo-link{
	display:flex;
	width:42px;
	height:42px;
	border-radius:50%;
	overflow:hidden;
	border:2px solid var(--neon-pink);
	box-shadow:0 0 8px var(--neon-pink-soft), 0 0 18px rgba(255,0,127,0.2);
	transition:box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}

.site-branding .custom-logo-link:hover{
	box-shadow:0 0 14px var(--neon-pink), 0 0 30px rgba(255,0,127,0.45);
	transform:scale(1.05);
}

.site-branding .custom-logo{
	width:100%;
	height:100%;
	object-fit:cover;
}

.site-header .header-inner{ position:relative; }

.nav-burger{
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	gap:5px;
	width:38px;
	height:38px;
	padding:0;
	background:rgba(255,255,255,0.04);
	border:1px solid var(--border-soft);
	border-radius:var(--radius-sm);
	cursor:pointer;
}

.nav-burger span{
	display:block;
	width:18px;
	height:2px;
	background:var(--neon-blue);
	border-radius:2px;
	transition:transform 0.3s var(--ease), opacity 0.3s var(--ease), background 0.3s var(--ease);
}

.nav-burger.is-open span{ background:var(--neon-pink); }
.nav-burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2){ opacity:0; }
.nav-burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (min-width:768px){
	.nav-burger{ display:none; }
}

@media (max-width:767.98px){
	.site-nav{
		position:fixed;
		top:var(--header-h-mobile);
		left:0; right:0;
		max-height:0;
		overflow:hidden;
		background:rgba(10,10,12,0.94);
		backdrop-filter:blur(10px);
		-webkit-backdrop-filter:blur(10px);
		border-bottom:1px solid var(--border-soft);
		transition:max-height 0.35s var(--ease);
	}

	.site-nav.is-open{ max-height:70vh; overflow-y:auto; }

	.site-nav ul{ flex-direction:column; padding:8px 24px 20px; }

	.site-nav a{ padding:14px 4px; border-bottom:1px solid rgba(255,255,255,0.06); }
}

.pll-switcher-wrap{ position:relative; }

.pll-switcher-toggle{
	display:flex;
	align-items:center;
	gap:6px;
	background:rgba(255,255,255,0.04);
	border:1px solid var(--border-soft);
	color:var(--neon-blue);
	font-size:13px;
	font-weight:600;
	letter-spacing:0.5px;
	padding:8px 10px;
	border-radius:var(--radius-sm);
	cursor:pointer;
	transition:border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), color 0.3s var(--ease);
}

.pll-switcher-toggle:hover,
.pll-switcher-wrap.is-open .pll-switcher-toggle{
	border-color:var(--neon-pink);
	box-shadow:0 0 10px rgba(255,0,127,0.25);
	color:var(--neon-pink);
}

ul.pll-switcher-list{
	position:absolute;
	top:calc(100% + 10px);
	right:0;
	min-width:150px;
	background:rgba(18,18,22,0.92);
	backdrop-filter:blur(10px);
	-webkit-backdrop-filter:blur(10px);
	border:1px solid var(--border-soft);
	border-radius:var(--radius-md);
	padding:6px;
	margin:0;
	list-style:none;
	opacity:0;
	visibility:hidden;
	transform:translateY(-8px);
	transition:opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
	box-shadow:0 12px 32px rgba(0,0,0,0.5);
	z-index:1100;
}

.pll-switcher-wrap.is-open ul.pll-switcher-list{
	opacity:1;
	visibility:visible;
	transform:translateY(0);
}

ul.pll-switcher-list li{
	padding:0;
}

ul.pll-switcher-list a{
	display:block;
	padding:10px 12px;
	font-size:14px;
	color:var(--text-body);
	border-radius:var(--radius-sm);
	transition:background 0.25s var(--ease), color 0.25s var(--ease), padding-left 0.25s var(--ease);
}

ul.pll-switcher-list a:hover,
ul.pll-switcher-list a:focus-visible{
	background:rgba(255,0,127,0.12);
	color:var(--neon-pink);
	padding-left:16px;
}

@media (prefers-reduced-motion: reduce){
	*{ transition-duration:0.01ms !important; animation-duration:0.01ms !important; }
}