/* ==========================================================================
   Celestial Kawaii — decorative elements & overrides
   ========================================================================== */

/* ---------- Sparkle / star keyframes ---------- */

@keyframes twinkle {
	0%, 100% { opacity: 0.3; transform: scale(0.8); }
	50% { opacity: 1; transform: scale(1.2); }
}

@keyframes twinkle-soft {
	0%, 100% { opacity: 0.4; }
	50% { opacity: 0.8; }
}

@keyframes float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
}

@keyframes drift {
	0%, 100% { transform: translateX(0) translateY(0); }
	25% { transform: translateX(3px) translateY(-2px); }
	75% { transform: translateX(-3px) translateY(2px); }
}

@keyframes moon-glow {
	0%, 100% { filter: drop-shadow(0 0 8px rgba(240, 216, 144, 0.3)); }
	50% { filter: drop-shadow(0 0 16px rgba(240, 216, 144, 0.5)); }
}

@keyframes fade-in-up {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes shimmer {
	0% { background-position: -200% center; }
	100% { background-position: 200% center; }
}

@keyframes pulse-gentle {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.05); }
}

/* ---------- Global spacing: header, content, footer ---------- */

.site-header {
	padding-top: 1.25rem !important;
	padding-bottom: 1.25rem !important;
}

.wp-site-blocks > main,
.wp-site-blocks > .wp-block-group > main {
	padding-top: 2.5rem !important;
	padding-bottom: 2.5rem !important;
}

.wp-block-template-part:last-child .wp-block-group {
	padding-top: 1.25rem !important;
	padding-bottom: 1.25rem !important;
}

/* ---------- Paragraph spacing ---------- */

.wp-block-post-content p {
	margin-bottom: 1.4rem;
}

/* Space before separator in posts */
.wp-block-post-content + .wp-block-separator,
.entry-content + .wp-block-separator {
	margin-top: 2rem !important;
}

/* Hide commas between tag bubbles */
.wp-block-post-terms .wp-block-post-terms__separator {
	display: none;
}

/* ---------- Tighten title-to-content spacing ---------- */

.wp-block-post-title {
	margin-bottom: 0.5rem !important;
}

.wp-block-post-content > *:first-child {
	margin-top: 0 !important;
}

/* Reduce large heading bottom margins globally */
h1.wp-block-heading,
.wp-block-post-content h1 {
	margin-bottom: 0.75rem !important;
}

h2.wp-block-heading,
.wp-block-post-content h2 {
	margin-bottom: 0.5rem !important;
}

/* Tighten block gap in content area */
.wp-block-post-content {
	gap: 1rem;
}

.entry-content > * + * {
	margin-top: 1rem;
}

/* ---------- Page content fade-in ---------- */

body > .wp-site-blocks {
	animation: fade-in 0.6s ease-out;
}

body > .wp-site-blocks > main,
body > .wp-site-blocks > .wp-block-group:not(.site-header) {
	animation: fade-in-up 0.8s ease-out both;
	animation-delay: 0.15s;
}

/* ---------- Background celestial sun ---------- */

.celestial-sun-bg {
	z-index: -1 !important;
}

@media (max-width: 1024px) {
	.celestial-sun-bg {
		display: none;
	}
}

/* ---------- Star field on body ---------- */

body {
	position: relative;
	overflow-x: hidden;
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background-image:
		radial-gradient(1.5px 1.5px at 10% 15%, #b088f9 50%, transparent 50%),
		radial-gradient(1px 1px at 25% 8%, #ffb7c5 50%, transparent 50%),
		radial-gradient(1.5px 1.5px at 40% 22%, #a8c8f0 50%, transparent 50%),
		radial-gradient(1px 1px at 55% 5%, #f0d890 50%, transparent 50%),
		radial-gradient(1.5px 1.5px at 70% 18%, #b088f9 50%, transparent 50%),
		radial-gradient(1px 1px at 85% 12%, #ffb7c5 50%, transparent 50%),
		radial-gradient(1px 1px at 15% 85%, #a8c8f0 50%, transparent 50%),
		radial-gradient(1.5px 1.5px at 30% 92%, #f0d890 50%, transparent 50%),
		radial-gradient(1px 1px at 50% 78%, #b088f9 50%, transparent 50%),
		radial-gradient(1.5px 1.5px at 65% 88%, #ffb7c5 50%, transparent 50%),
		radial-gradient(1px 1px at 80% 95%, #a8c8f0 50%, transparent 50%),
		radial-gradient(1px 1px at 92% 82%, #f0d890 50%, transparent 50%),
		radial-gradient(1px 1px at 5% 50%, #b088f9 50%, transparent 50%),
		radial-gradient(1.5px 1.5px at 95% 45%, #ffb7c5 50%, transparent 50%),
		radial-gradient(1px 1px at 18% 40%, #f0d890 50%, transparent 50%),
		radial-gradient(1.5px 1.5px at 75% 55%, #a8c8f0 50%, transparent 50%),
		radial-gradient(1px 1px at 48% 35%, #b088f9 50%, transparent 50%);
	opacity: 0.5;
	animation: twinkle-soft 5s ease-in-out infinite;
}

/* Second star layer with offset timing */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background-image:
		radial-gradient(1px 1px at 8% 30%, #f0d890 50%, transparent 50%),
		radial-gradient(1.5px 1.5px at 22% 65%, #b088f9 50%, transparent 50%),
		radial-gradient(1px 1px at 38% 48%, #ffb7c5 50%, transparent 50%),
		radial-gradient(1px 1px at 62% 25%, #a8c8f0 50%, transparent 50%),
		radial-gradient(1.5px 1.5px at 78% 72%, #f0d890 50%, transparent 50%),
		radial-gradient(1px 1px at 88% 38%, #b088f9 50%, transparent 50%),
		radial-gradient(1px 1px at 42% 90%, #ffb7c5 50%, transparent 50%);
	opacity: 0.35;
	animation: twinkle-soft 5s ease-in-out infinite;
	animation-delay: 2.5s;
}

/* ---------- Site header — crescent moon ---------- */

.site-header {
	position: relative;
	animation: fade-in 0.5s ease-out;
}

.celestial-moon {
	display: inline-block;
	width: 28px;
	height: 28px;
	margin-right: 8px;
	vertical-align: middle;
	animation: float 4s ease-in-out infinite, moon-glow 3s ease-in-out infinite;
	border-radius: 50%;
}

/* ---------- Post cards ---------- */

.blog-post-card {
	background: #ffffff;
	border: 1px solid #e8d8f8;
	border-radius: 20px;
	padding: 2rem;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
	position: relative;
	overflow: hidden;
	animation: fade-in-up 0.6s ease-out both;
}

.blog-post-card:nth-child(1) { animation-delay: 0.1s; }
.blog-post-card:nth-child(2) { animation-delay: 0.2s; }
.blog-post-card:nth-child(3) { animation-delay: 0.3s; }
.blog-post-card:nth-child(4) { animation-delay: 0.4s; }
.blog-post-card:nth-child(5) { animation-delay: 0.5s; }

.blog-post-card:hover {
	transform: translateY(-3px);
	border-color: #d0b8f0;
	box-shadow:
		0 8px 30px rgba(176, 136, 249, 0.12),
		0 2px 8px rgba(176, 136, 249, 0.08);
}

/* Tiny star in top-right of cards */
.blog-post-card::after {
	content: "\2726";
	position: absolute;
	top: 12px;
	right: 16px;
	color: #f0d890;
	font-size: 14px;
	opacity: 0.6;
	animation: twinkle 3s ease-in-out infinite;
	animation-delay: var(--twinkle-delay, 0s);
}

.blog-post-card:nth-child(2n)::after {
	--twinkle-delay: 1s;
	content: "\2727";
	color: #b088f9;
}

.blog-post-card:nth-child(3n)::after {
	--twinkle-delay: 1.5s;
	content: "\2726";
	color: #ffb7c5;
}

/* ---------- Separator — full wide line ---------- */

hr.wp-block-separator {
	border: none !important;
	border-top: 1px solid #e8d8f8 !important;
	width: 100%;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

hr.wp-block-separator.is-style-wide {
	border-top: 1px solid #e8d8f8 !important;
	width: 100%;
}

hr.wp-block-separator.is-style-dots::before {
	content: "\2726  \00b7  \2727  \00b7  \2726";
	color: #b088f9;
	font-size: 12px;
	letter-spacing: 4px;
	opacity: 0.6;
}

hr.wp-block-separator.is-style-dots {
	border: none !important;
	text-align: center;
	overflow: visible;
}

/* ---------- Footer constellation ---------- */

.celestial-footer-decoration {
	text-align: center;
	letter-spacing: 12px;
	font-size: 10px;
	line-height: 1;
	color: #b088f9;
	opacity: 0.5;
	padding: 0.5rem 0;
	animation: twinkle-soft 4s ease-in-out infinite;
}

/* ---------- Category / tag badges ---------- */

.wp-block-post-terms a,
.taxonomy-category a,
.tag-links a {
	background: #f0e8ff;
	color: #6a42a0;
	padding: 3px 12px;
	border-radius: 20px;
	font-size: 0.8rem;
	text-decoration: none;
	transition: background 0.2s ease, transform 0.2s ease;
	display: inline-block;
	margin: 0.15rem 0.2rem;
}

.wp-block-post-terms a:hover,
.taxonomy-category a:hover,
.tag-links a:hover {
	background: #e8d8f8;
	color: #5a4a6a;
	transform: translateY(-1px);
}

/* ---------- Blockquote sparkle ---------- */

.wp-block-quote {
	position: relative;
}

.wp-block-quote::before {
	content: "\2728";
	position: absolute;
	left: -0.5rem;
	top: -0.5rem;
	font-size: 16px;
	opacity: 0.5;
	animation: twinkle 3s ease-in-out infinite;
}

/* ---------- Headings sparkle on hover ---------- */

.wp-block-post-content h1,
.wp-block-post-content h2,
.wp-block-post-content h3 {
	position: relative;
	transition: color 0.2s ease;
}

.wp-block-post-content h2::before,
.wp-block-post-content h1::before {
	content: "\2727";
	position: absolute;
	left: -1.5rem;
	color: #b088f9;
	font-size: 14px;
	animation: drift 3s ease-in-out infinite;
}

.wp-block-post-content h2::before,
.wp-block-post-content h1::before {
	opacity: 0.6;
}

/* ---------- Images glow on hover ---------- */

.wp-block-image img {
	border-radius: 16px;
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.wp-block-image img:hover {
	box-shadow: 0 4px 24px rgba(176, 136, 249, 0.15);
	transform: translateY(-2px);
}

.wp-block-image figcaption {
	color: #8a7aaa;
	font-size: 0.8rem;
	text-align: center;
	margin-top: 0.5rem;
}

/* ---------- Pagination ---------- */

.wp-block-query-pagination-numbers .page-numbers,
.wp-block-query-pagination-next,
.wp-block-query-pagination-previous {
	background: #ffffff;
	border: 1px solid #e8d8f8;
	border-radius: 12px;
	padding: 6px 14px;
	color: #5a4a6a;
	text-decoration: none;
	font-size: 0.875rem;
	transition: all 0.2s ease;
}

.wp-block-query-pagination-numbers .page-numbers:hover,
.wp-block-query-pagination-next:hover,
.wp-block-query-pagination-previous:hover {
	background: #f0e8ff;
	border-color: #b088f9;
	transform: translateY(-1px);
}

.wp-block-query-pagination-numbers .page-numbers.current {
	background: #b088f9;
	color: #ffffff;
	border-color: #b088f9;
}

/* ---------- Nav links subtle hover sparkle ---------- */

.wp-block-navigation a {
	transition: color 0.2s ease;
	position: relative;
}

.wp-block-navigation a::after {
	content: "\2726";
	position: absolute;
	bottom: -4px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 8px;
	color: #b088f9;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.wp-block-navigation a:hover::after {
	opacity: 0.6;
}

/* ---------- Post navigation links ---------- */

.wp-block-post-navigation-link {
	font-size: 1.1rem;
}

.wp-block-post-navigation-link a {
	transition: transform 0.2s ease;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	text-decoration: none !important;
}

.wp-block-post-navigation-link a:hover {
	transform: translateX(-3px);
}

.wp-block-post-navigation-link.post-navigation-link-next a:hover {
	transform: translateX(3px);
}

/* Sparkle decorations — no underline, word only underlined */
.wp-block-post-navigation-link.post-navigation-link-previous a::before {
	content: "\2726";
	text-decoration: none !important;
}

.wp-block-post-navigation-link.post-navigation-link-next a::after {
	content: "\2726";
	text-decoration: none !important;
}

/* Underline only the label text */
.wp-block-post-navigation-link a .post-navigation-link__label {
	text-decoration: underline;
}

/* ---------- Selection color ---------- */

::selection {
	background: #e8d8f8;
	color: #5a4a6a;
}

/* ---------- Comment area ---------- */

.wp-block-post-comments-form input[type="text"],
.wp-block-post-comments-form input[type="email"],
.wp-block-post-comments-form input[type="url"],
.wp-block-post-comments-form textarea {
	border: 1px solid #e8d8f8;
	border-radius: 12px;
	background: #f5eeff;
	color: #5a4a6a;
	padding: 0.75rem 1rem;
	font-family: inherit;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wp-block-post-comments-form input:focus,
.wp-block-post-comments-form textarea:focus {
	border-color: #b088f9;
	outline: none;
	box-shadow: 0 0 0 3px rgba(176, 136, 249, 0.15);
}

/* Checkbox rows — keep checkbox and label on same line */
.comment-subscription-form,
.comment-form-cookies-consent {
	display: flex !important;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.25rem !important;
	margin-bottom: 0.25rem !important;
}

.comment-subscription-form label,
.comment-form-cookies-consent label {
	display: inline !important;
	font-size: 0.85rem;
	color: #8a7aaa;
	font-weight: 400;
}

.comment-subscription-form input[type="checkbox"],
.comment-form-cookies-consent input[type="checkbox"] {
	margin: 0;
	flex-shrink: 0;
}

.wp-block-post-comments-form p.form-submit,
.comment-form p.form-submit {
	margin-top: 0.75rem;
}

/* Comment submit button */
.wp-block-post-comments-form input[type="submit"],
.comment-form input[type="submit"] {
	background: #6a42a0;
	color: #ffffff;
	border: none;
	border-radius: 24px;
	padding: 0.7rem 2rem;
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.wp-block-post-comments-form input[type="submit"]:hover,
.comment-form input[type="submit"]:hover {
	background: #5a3590;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(106, 66, 160, 0.25);
}

/* Reduce spacing between form fields */
.wp-block-post-comments-form .comment-form > p,
.comment-form > p {
	margin-bottom: 0.75rem;
}

.wp-block-post-comments-form .comment-form > p > label,
.comment-form > p > label {
	font-size: 0.875rem;
	font-weight: 600;
	color: #5a4a6a;
	margin-bottom: 0.25rem;
	display: block;
}

/* ---------- Search block ---------- */

.wp-block-search__input {
	border: 1px solid #e8d8f8 !important;
	border-radius: 24px !important;
	padding: 0.7rem 1.25rem !important;
	background: #f5eeff !important;
	color: #5a4a6a;
	font-family: inherit;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wp-block-search__input:focus {
	border-color: #b088f9 !important;
	outline: none;
	box-shadow: 0 0 0 3px rgba(176, 136, 249, 0.15);
}

/* Search form wrapper — remove default border/background */
.wp-block-search__inside-wrapper {
	border: none !important;
	background: transparent !important;
	padding: 0 !important;
}

/* Go button — even padding */
.wp-block-search__button {
	padding: 0.7rem 1.5rem !important;
	border-radius: 24px !important;
	white-space: nowrap;
}

/* "return home" style link — no underline on star */
.celestial-home-link a {
	text-decoration: none !important;
}

/* ---------- Button sparkle hover ---------- */

.wp-block-button__link,
.wp-block-search__button {
	position: relative;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wp-block-button__link:hover,
.wp-block-search__button:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(176, 136, 249, 0.2);
}

/* ---------- Latest Posts block — card style ---------- */

.wp-block-latest-posts {
	padding: 0 !important;
	list-style: none !important;
	display: flex !important;
	flex-direction: column;
	gap: 1rem;
	max-width: 100%;
	box-sizing: border-box;
}

.wp-block-latest-posts.is-grid {
	display: grid !important;
	grid-template-columns: repeat(var(--latest-posts-columns, 2), 1fr) !important;
	gap: 1.25rem !important;
	flex-wrap: nowrap;
}

/* Respect column count from the block */
.wp-block-latest-posts.columns-2 { --latest-posts-columns: 2; }
.wp-block-latest-posts.columns-3 { --latest-posts-columns: 3; }
.wp-block-latest-posts.columns-4 { --latest-posts-columns: 4; }

.wp-block-latest-posts > li {
	background: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	border: 1px solid #e8d8f8;
	border-radius: 20px;
	padding: 1.5rem 1.75rem;
	margin: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
	position: relative;
	overflow: visible;
	animation: fade-in-up 0.6s ease-out both;
	list-style: none;
}

.wp-block-latest-posts > li:nth-child(1) { animation-delay: 0.1s; }
.wp-block-latest-posts > li:nth-child(2) { animation-delay: 0.15s; }
.wp-block-latest-posts > li:nth-child(3) { animation-delay: 0.2s; }
.wp-block-latest-posts > li:nth-child(4) { animation-delay: 0.25s; }
.wp-block-latest-posts > li:nth-child(5) { animation-delay: 0.3s; }
.wp-block-latest-posts > li:nth-child(6) { animation-delay: 0.35s; }

.wp-block-latest-posts > li:hover {
	transform: translateY(-3px);
	border-color: #d0b8f0;
	background: rgba(255, 255, 255, 0.85);
	box-shadow:
		0 8px 30px rgba(176, 136, 249, 0.12),
		0 2px 8px rgba(176, 136, 249, 0.08);
}

/* Tiny star in top-right */
.wp-block-latest-posts > li::after {
	content: "\2726";
	position: absolute;
	top: 12px;
	right: 16px;
	color: #f0d890;
	font-size: 14px;
	opacity: 0.6;
	animation: twinkle 3s ease-in-out infinite;
}

.wp-block-latest-posts > li:nth-child(2n)::after {
	content: "\2727";
	color: #b088f9;
	animation-delay: 1s;
}

.wp-block-latest-posts > li:nth-child(3n)::after {
	content: "\2726";
	color: #ffb7c5;
	animation-delay: 1.5s;
}

.wp-block-latest-posts__post-title {
	font-family: var(--wp--preset--font-family--lora);
	font-weight: 700;
}

.wp-block-latest-posts__post-date {
	color: #8a7aaa;
	font-size: 0.8rem;
}

.wp-block-latest-posts__post-excerpt {
	color: #5a4a6a;
	font-size: 0.95rem;
}

/* ---------- Mobile navigation overlay ---------- */

.wp-block-navigation__responsive-container.is-menu-open {
	background-color: #fdf5ff !important;
	padding: 2rem !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 1rem !important;
	gap: 0 !important;
	align-items: flex-start !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	border-bottom: 1px solid #e8d8f8;
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
	display: block !important;
	padding: 1rem 0 !important;
	font-size: 1.15rem !important;
	font-weight: 600 !important;
	color: #5a4a6a !important;
	text-decoration: none !important;
	transition: color 0.2s ease;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:hover {
	color: #7b52ae !important;
}

/* Mobile menu close button */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	color: #5a4a6a !important;
	position: absolute !important;
	top: 1.5rem !important;
	right: 1.5rem !important;
}

/* Mobile menu open button (hamburger) */
.wp-block-navigation__responsive-container-open {
	color: #5a4a6a !important;
}

/* ---------- Responsive ---------- */

@media (max-width: 782px) {
	.wp-block-latest-posts,
	.wp-block-latest-posts.is-grid {
		grid-template-columns: 1fr !important;
		gap: 1rem !important;
		overflow: hidden;
		padding-right: 1rem !important;
	}

	.wp-block-latest-posts > li {
		padding: 1.25rem;
		border-radius: 16px;
		margin: 0 !important;
		width: auto !important;
		max-width: 100% !important;
	}

	.blog-post-card {
		padding: 1.25rem;
		border-radius: 16px;
		margin-bottom: 1rem;
	}

	body::before,
	body::after {
		opacity: 0.25;
	}

	.wp-block-post-content h2::before {
		display: none;
	}
}

/* ---------- Reduce motion ---------- */

@media (prefers-reduced-motion: reduce) {
	body::before,
	body::after,
	.celestial-moon,
	.blog-post-card::after,
	.wp-block-quote::before,
	.celestial-footer-decoration {
		animation: none;
	}

	body > .wp-site-blocks,
	body > .wp-site-blocks > main,
	body > .wp-site-blocks > .wp-block-group:not(.site-header),
	.blog-post-card,
	.site-header {
		animation: none;
	}

	.blog-post-card:hover,
	.wp-block-image img:hover,
	.wp-block-button__link:hover,
	.wp-block-post-navigation-link a:hover {
		transform: none;
	}
}