/*
Theme Name: Bluzut
Template: twentytwentyfive
Description: Child theme for bluzut.com in black, metallic purple, metallic gold and white.
Version: 1.2.0
Requires at least: 6.7
Text Domain: bluzut
*/

:root {
	--bz-black: #0b0810;
	--bz-night: #140c22;
	--bz-purple-deep: #2a1450;
	--bz-purple: #6b2fb3;
	--bz-violet: #9b5de5;
	--bz-lavender: #c9a7ff;
	--bz-gold: #d4af37;
	--bz-gold-light: #f3d27a;
	--bz-white: #ffffff;
	--bz-gold-metal: linear-gradient(135deg, #8a6a1f 0%, #f3d27a 30%, #b8892b 50%, #f7e3a1 70%, #8a6a1f 100%);
	--bz-purple-metal: linear-gradient(135deg, #2a1450 0%, #5b2a9e 35%, #9b5de5 50%, #5b2a9e 65%, #2a1450 100%);
	--bz-card: linear-gradient(160deg, rgba(107, 47, 179, 0.28) 0%, rgba(20, 12, 34, 0.92) 60%);
	--bz-radius: 16px;
}

body {
	background:
		radial-gradient(1100px 600px at 50% -10%, rgba(107, 47, 179, 0.45) 0%, transparent 65%),
		radial-gradient(800px 500px at 100% 100%, rgba(42, 20, 80, 0.6) 0%, transparent 70%),
		var(--bz-black);
	background-attachment: fixed;
	color: var(--bz-white);
}

/* Metallic gold headings */
.bz-title,
.bz-section h2,
.bz-logo a,
.bz-logo {
	background: var(--bz-gold-metal);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent !important;
	text-decoration: none;
}

/* Header */
.bz-header {
	padding-block: 1rem;
	border-bottom: 1px solid rgba(212, 175, 55, 0.25);
	background: rgba(11, 8, 16, 0.75);
	backdrop-filter: blur(8px);
	position: sticky;
	top: 0;
	z-index: 10;
}
.bz-logo {
	font-weight: 800;
	font-size: 1.5rem;
	letter-spacing: 0.04em;
	margin: 0;
}
.bz-nav a {
	color: var(--bz-white);
	text-decoration: none;
}
.bz-nav a:hover,
.bz-nav a:focus-visible {
	color: var(--bz-gold-light);
}

/* Sections */
.bz-hero,
.bz-section {
	text-align: center;
	scroll-margin-top: 5rem;
}
.bz-hero {
	padding-block: clamp(3rem, 10vw, 6rem) clamp(2rem, 5vw, 3rem);
}
.bz-section {
	padding-block: clamp(2.5rem, 7vw, 4.5rem);
}
.bz-title {
	font-size: clamp(2.75rem, 9vw, 4.5rem);
	font-weight: 800;
	letter-spacing: 0.03em;
	margin-block: 1.25rem 0.5rem;
}
.bz-tagline {
	color: var(--bz-lavender);
	font-size: clamp(1.05rem, 2.6vw, 1.3rem);
}
.bz-section h2 {
	font-size: clamp(1.9rem, 5vw, 2.6rem);
	font-weight: 800;
}
.bz-section p {
	max-width: 42rem;
	margin-inline: auto;
}

/* Avatar with metallic gold ring and purple glow */
.bz-avatar img {
	width: 180px;
	height: 180px;
	border-radius: 50%;
	object-fit: cover;
	border: 4px solid transparent;
	background: linear-gradient(var(--bz-black), var(--bz-black)) padding-box, var(--bz-gold-metal) border-box;
	box-shadow: 0 0 0 6px rgba(107, 47, 179, 0.35), 0 0 60px rgba(155, 93, 229, 0.55);
}

/* Divider line between sections */
.bz-section::before {
	content: "";
	display: block;
	width: min(240px, 50%);
	height: 2px;
	margin: 0 auto clamp(2rem, 5vw, 3rem);
	background: var(--bz-gold-metal);
	border-radius: 2px;
	opacity: 0.7;
}

/* Cards */
.bz-cards {
	margin-top: 2rem;
	text-align: left;
}
.bz-card {
	background: var(--bz-card);
	border: 1px solid rgba(212, 175, 55, 0.35);
	border-radius: var(--bz-radius);
	padding: 1.5rem;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 30px rgba(0, 0, 0, 0.45);
}
.bz-card h3 {
	color: var(--bz-gold-light);
	font-size: 1.25rem;
	margin: 0 0 0.5rem;
}
.bz-card p {
	margin: 0;
	color: rgba(255, 255, 255, 0.85);
}

/* Buttons: metallic gold by default, metallic purple variant */
.wp-block-button__link,
.bz-gate__btn {
	background: var(--bz-gold-metal) !important;
	color: var(--bz-black) !important;
	font-weight: 700;
	border: 0;
	border-radius: 999px;
	padding: 0.75rem 1.5rem;
	box-shadow: 0 6px 20px rgba(212, 175, 55, 0.25);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	cursor: pointer;
	text-decoration: none;
}
.is-style-outline .wp-block-button__link,
.bz-btn-purple .wp-block-button__link,
.bz-gate__links a {
	background: var(--bz-purple-metal) !important;
	color: var(--bz-white) !important;
	box-shadow: 0 6px 20px rgba(107, 47, 179, 0.4);
	border: 1px solid rgba(201, 167, 255, 0.35);
}
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible,
.bz-gate__btn:hover,
.bz-gate__btn:focus-visible,
.bz-gate__links a:hover,
.bz-gate__links a:focus-visible {
	transform: translateY(-2px);
}
.bz-socials {
	margin-top: 1.5rem;
}

/* 18+ gate */
.bz-gate {
	margin: 2rem auto 0;
	max-width: 36rem;
	padding: 1.75rem;
	background: var(--bz-card);
	border: 1px solid rgba(155, 93, 229, 0.5);
	border-radius: var(--bz-radius);
}
.bz-gate__badge {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	background: var(--bz-gold-metal);
	color: var(--bz-black);
	font-weight: 800;
	margin-bottom: 0.75rem;
}
.bz-gate__links {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
}
.bz-gate__links a {
	display: inline-block;
	font-weight: 700;
	border-radius: 999px;
	padding: 0.75rem 1.5rem;
	text-decoration: none;
	transition: transform 0.15s ease;
}
.bz-gate__btn:disabled {
	opacity: 0.6;
	cursor: progress;
}

/* Footer */
.bz-footer {
	padding-block: 2rem;
	border-top: 1px solid rgba(212, 175, 55, 0.25);
	text-align: center;
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.9rem;
}

/* Home hero with the moonlit photo */
.bz-hero--moon {
	display: flex;
	align-items: center;
	min-height: min(82vh, 760px);
	margin-top: 0 !important;
	padding-inline: clamp(1rem, 6vw, 5rem);
	text-align: left;
	background:
		linear-gradient(90deg, rgba(11, 8, 16, 0.94) 0%, rgba(11, 8, 16, 0.72) 38%, rgba(11, 8, 16, 0.1) 72%),
		linear-gradient(0deg, var(--bz-black) 0%, transparent 25%),
		url(assets/hero-moonlit.jpg) 72% center / cover no-repeat;
}
.bz-hero--moon .bz-hero__inner {
	max-width: 34rem;
}
.bz-hero--moon .bz-title {
	margin-top: 0;
}
.bz-hero--moon .wp-block-buttons {
	justify-content: flex-start;
}
.bz-home,
.bz-home > .wp-block-post-content,
.bz-home .bz-hero--moon {
	margin-top: 0 !important;
}
@media (max-width: 1000px) {
	.bz-hero--moon {
		align-items: flex-end;
		min-height: 88vh;
		text-align: center;
		padding-bottom: 2.5rem;
		background:
			linear-gradient(180deg, rgba(11, 8, 16, 0.1) 0%, rgba(11, 8, 16, 0.75) 55%, var(--bz-black) 100%),
			url(assets/hero-moonlit.jpg) 50% top / cover no-repeat;
	}
	.bz-hero--moon .bz-hero__inner {
		margin-inline: auto;
	}
	.bz-hero--moon .wp-block-buttons {
		justify-content: center;
	}
}

/* Linked cards on the home page */
.bz-card a {
	color: inherit;
	text-decoration: none;
}
.bz-card a::after {
	content: " →";
}
.bz-card:has(a):hover {
	border-color: rgba(243, 210, 122, 0.8);
}

/* Sub pages */
.bz-page {
	padding-block: clamp(2.5rem, 7vw, 4.5rem);
	text-align: center;
}
.bz-page-title {
	font-size: clamp(2.2rem, 7vw, 3.4rem);
	margin-bottom: 2rem;
}
.bz-page p {
	max-width: 42rem;
	margin-inline: auto;
}
.bz-photo img {
	border-radius: var(--bz-radius);
	border: 1px solid rgba(212, 175, 55, 0.4);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 40px rgba(107, 47, 179, 0.3);
}

/* Character cards on the About page */
.bz-subtitle {
	margin-top: clamp(2.5rem, 6vw, 4rem);
	font-size: clamp(1.6rem, 4.5vw, 2.2rem);
	font-weight: 800;
	background: var(--bz-gold-metal);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent !important;
}
.bz-char {
	text-align: center;
	padding: 1rem;
}
.bz-char h3 {
	margin: 0.75rem 0 0.25rem;
}
.bz-char img,
.bz-char .bz-char__placeholder {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 12px;
	margin: 0;
}
.bz-char .bz-char__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bz-purple-metal);
	color: rgba(255, 255, 255, 0.75);
	font-style: italic;
	border: 1px dashed rgba(243, 210, 122, 0.5);
}

/* Age gate form */
.bz-gate form {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}
.bz-gate [hidden] {
	display: none !important;
}
.bz-gate__label {
	font-weight: 700;
	color: var(--bz-gold-light);
}
.bz-gate__date {
	color-scheme: dark;
	font: inherit;
	color: var(--bz-white);
	background: var(--bz-night);
	border: 1px solid rgba(212, 175, 55, 0.6);
	border-radius: 10px;
	padding: 0.6rem 0.9rem;
}
.bz-gate__date:focus-visible {
	outline: 2px solid var(--bz-gold-light);
	outline-offset: 2px;
}
.bz-gate__msg {
	color: #ff9db5;
	font-weight: 700;
	margin: 0;
}
.bz-gate__note {
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.6);
	margin: 0;
}
.bz-credit {
	font-size: 0.8rem;
	opacity: 0.75;
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
	}
}