/* ==========================================================
   Lunaramoon: a dark, magical fairytale under the stars
   Black roses, red spider lilies, moonlight and parchment.
   ========================================================== */

/* ---------- The whole site is a night sky ---------- */
body {
	background-color: #150d1e;
	background-image:
		radial-gradient(1px 1px at 30px 40px, rgba(255, 255, 255, 0.55) 50%, transparent 51%),
		radial-gradient(1px 1px at 190px 120px, rgba(201, 181, 236, 0.6) 50%, transparent 51%),
		radial-gradient(1.4px 1.4px at 300px 60px, rgba(243, 227, 176, 0.6) 50%, transparent 51%),
		radial-gradient(1px 1px at 110px 250px, rgba(255, 255, 255, 0.45) 50%, transparent 51%),
		radial-gradient(1px 1px at 360px 290px, rgba(95, 211, 194, 0.5) 50%, transparent 51%),
		radial-gradient(ellipse at 15% 0%, rgba(106, 59, 140, 0.35), transparent 55%),
		radial-gradient(ellipse at 90% 60%, rgba(196, 22, 47, 0.12), transparent 50%);
	background-size: 400px 330px, 400px 330px, 400px 330px, 400px 330px, 400px 330px, 100% 100%, 100% 100%;
	background-attachment: fixed;
}

/* ---------- Starry night sections ---------- */
.wp-block-group.is-style-starry-night {
	position: relative;
	overflow: hidden;
	color: #fff;
	background-color: #120a1a;
	background-image:
		url("../svg/moon.svg"),
		radial-gradient(1px 1px at 22px 34px, #ffffff 50%, transparent 51%),
		radial-gradient(1px 1px at 132px 86px, rgba(255, 255, 255, 0.8) 50%, transparent 51%),
		radial-gradient(1.6px 1.6px at 214px 152px, #f3e3b0 50%, transparent 51%),
		radial-gradient(1px 1px at 64px 196px, #c9b5ec 50%, transparent 51%),
		radial-gradient(1px 1px at 176px 12px, #5fd3c2 50%, transparent 51%),
		radial-gradient(ellipse at 50% 115%, rgba(196, 22, 47, 0.35), transparent 60%),
		linear-gradient(180deg, #0f0816 0%, #1d1228 50%, #2e1840 100%);
	background-repeat: no-repeat, repeat, repeat, repeat, repeat, repeat, no-repeat, no-repeat;
	background-position: left 4% top 6%, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
	background-size: 170px 170px, 290px 230px, 290px 230px, 290px 230px, 290px 230px, 290px 230px, 100% 100%, 100% 100%;
	padding-bottom: calc(var(--wp--preset--spacing--70) + 90px) !important;
}

/* Twinkling stars */
.wp-block-group.is-style-starry-night::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(2px 2px at 40px 60px, #ffffff 50%, transparent 51%),
		radial-gradient(1.8px 1.8px at 250px 30px, #f6e7b8 50%, transparent 51%),
		radial-gradient(2px 2px at 160px 180px, #ffffff 50%, transparent 51%),
		radial-gradient(1.6px 1.6px at 310px 120px, #c9b5ec 50%, transparent 51%),
		radial-gradient(1.6px 1.6px at 90px 240px, #5fd3c2 50%, transparent 51%);
	background-size: 340px 270px;
	animation: lunaramoon-twinkle 3.2s ease-in-out infinite alternate;
	pointer-events: none;
	z-index: 0;
}

/* Black roses and red spider lilies along the bottom */
.wp-block-group.is-style-starry-night::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 140px;
	background: url("../images/flower-border.png") repeat-x left bottom / auto 140px;
	pointer-events: none;
	z-index: 0;
}

.wp-block-group.is-style-starry-night > * {
	position: relative;
	z-index: 1;
}

@keyframes lunaramoon-twinkle {
	0% { opacity: 0.15; }
	60% { opacity: 0.9; }
	100% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-group.is-style-starry-night::before {
		animation: none;
		opacity: 0.6;
	}
}

@media (max-width: 781px) {
	.wp-block-group.is-style-starry-night {
		background-size: 110px 110px, 290px 230px, 290px 230px, 290px 230px, 290px 230px, 290px 230px, 100% 100%, 100% 100%;
		padding-bottom: calc(var(--wp--preset--spacing--70) + 70px) !important;
	}

	.wp-block-group.is-style-starry-night::after {
		height: 105px;
		background-size: auto 105px;
	}
}

/* ---------- Parchment pages (cards) ---------- */
.wp-block-group.is-style-parchment {
	position: relative;
	background:
		url("../images/rose-corner.png") no-repeat right 8px bottom 8px / 54px 54px,
		linear-gradient(180deg, #fffaf0 0%, #f4e9d6 100%);
	border: 1px solid #d9c39c;
	border-radius: 14px;
	box-shadow: 0 0 0 1px rgba(196, 22, 47, 0.15), 0 18px 40px -18px rgba(0, 0, 0, 0.7), 0 0 40px -10px rgba(185, 154, 214, 0.25);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40) calc(var(--wp--preset--spacing--50) + 20px);
	color: #1a1420;
}

.wp-block-group.is-style-parchment::after {
	content: "";
	position: absolute;
	inset: 7px;
	border: 1px solid rgba(142, 15, 34, 0.25);
	border-radius: 10px;
	pointer-events: none;
}

.wp-block-group.is-style-parchment > * {
	position: relative;
	z-index: 1;
}

.wp-block-group.is-style-parchment :where(h1, h2, h3, h4, h5, h6) {
	color: #3b2150;
}

/* ---------- Images ---------- */
.wp-block-image.is-style-moon-frame img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	width: 100%;
	border-radius: 50% 50% 18px 18px / 32% 32% 18px 18px;
	border: 3px solid #b99ad6;
	box-shadow: 0 0 0 8px rgba(185, 154, 214, 0.15), 0 0 0 9px rgba(196, 22, 47, 0.35), 0 0 80px rgba(246, 231, 184, 0.28);
}

.wp-block-image.is-style-storybook img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
	width: 100%;
	border-radius: 10px;
	border: 1px solid rgba(106, 59, 140, 0.35);
}

/* ---------- Spider lily ornament divider ---------- */
.wp-block-separator.is-style-ornament {
	border: none !important;
	background: url("../svg/ornament.svg") no-repeat center / contain !important;
	height: 60px;
	width: min(100%, 340px);
	max-width: 340px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	opacity: 1;
}

/* ---------- Storybook drop caps ---------- */
.has-drop-cap:not(:focus)::first-letter {
	font-family: var(--wp--preset--font-family--cormorant);
	font-weight: 700;
	font-size: 4.6em;
	line-height: 0.8;
	color: #e0283f;
	text-shadow: 0 0 18px rgba(224, 40, 63, 0.45);
	margin: 0.08em 0.14em 0 0;
}

/* ---------- Quotes as glowing epigraphs ---------- */
.wp-block-quote {
	border-left-color: #c4162f !important;
}

.wp-block-quote p {
	font-family: var(--wp--preset--font-family--cormorant);
	font-size: var(--wp--preset--font-size--x-large);
	font-style: italic;
	line-height: 1.3;
}

/* ---------- Magical glow on big headings ---------- */
h1.wp-block-heading {
	text-shadow: 0 0 28px rgba(185, 154, 214, 0.45);
}

/* Buttons glow softly */
.wp-block-button__link {
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.wp-block-button__link:hover {
	box-shadow: 0 0 22px rgba(95, 211, 194, 0.45);
	transform: translateY(-1px);
}

/* ==========================================================
   Side menu: slides in from the right like a book page
   ========================================================== */
.lunaramoon-side-menu .wp-block-navigation__responsive-container.is-menu-open {
	left: auto !important;
	right: 0 !important;
	width: min(380px, 88vw) !important;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--50) !important;
	background-image:
		url("../svg/moon.svg"),
		radial-gradient(1px 1px at 22px 34px, #ffffff 50%, transparent 51%),
		radial-gradient(1.4px 1.4px at 140px 90px, #f3e3b0 50%, transparent 51%),
		radial-gradient(1px 1px at 70px 170px, #c9b5ec 50%, transparent 51%),
		linear-gradient(180deg, #120a1a 0%, #1d1228 60%, #3a0d1a 100%) !important;
	background-repeat: no-repeat, repeat, repeat, repeat, no-repeat !important;
	background-position: right 18px bottom 24px, 0 0, 0 0, 0 0, 0 0 !important;
	background-size: 110px 110px, 220px 200px, 220px 200px, 220px 200px, 100% 100% !important;
	border-left: 1px solid rgba(196, 22, 47, 0.55);
	box-shadow: -30px 0 70px rgba(0, 0, 0, 0.65);
	animation: lunaramoon-slide-in 0.35s ease-out !important;
	overflow-y: auto;
}

@keyframes lunaramoon-slide-in {
	from { transform: translateX(100%); }
	to { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
	.lunaramoon-side-menu .wp-block-navigation__responsive-container.is-menu-open {
		animation: none !important;
	}
}

/* Dim the page behind the open menu */
html.has-modal-open body::after {
	content: "";
	position: fixed;
	inset: 0;
	background: rgba(10, 5, 15, 0.6);
	z-index: 99999;
}

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

.lunaramoon-side-menu .is-menu-open .wp-block-navigation__container {
	align-items: flex-start !important;
	gap: 1.1rem !important;
}

/* Main menu items */
.lunaramoon-side-menu .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--cormorant);
	font-size: 1.6rem;
	font-weight: 600;
	color: #ffffff;
	text-decoration: none;
}

.lunaramoon-side-menu .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::before {
	content: "\2726";
	color: #e0283f;
	font-size: 0.7em;
	margin-right: 0.55em;
	vertical-align: 0.15em;
}

/* Sub items: indented, with a thin spider-lily red line */
.lunaramoon-side-menu .is-menu-open .wp-block-navigation__submenu-container {
	padding: 0.3rem 0 0.2rem 1.1rem !important;
	margin-top: 0.4rem !important;
	margin-left: 0.4rem !important;
	border-left: 1px solid rgba(224, 40, 63, 0.6) !important;
	gap: 0.55rem !important;
}

.lunaramoon-side-menu .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--raleway);
	font-size: 1rem;
	color: #c9b5ec;
	text-decoration: none;
}

.lunaramoon-side-menu .is-menu-open .wp-block-navigation-item__content:hover,
.lunaramoon-side-menu .is-menu-open .wp-block-navigation-item__content:focus {
	color: #5fd3c2 !important;
	text-shadow: 0 0 14px rgba(95, 211, 194, 0.55);
}

/* Social icons at the bottom of the menu */
.lunaramoon-side-menu .is-menu-open .wp-block-social-links {
	margin-top: 1.4rem !important;
	padding-top: 1.2rem;
	border-top: 1px solid rgba(185, 154, 214, 0.3);
	font-size: 26px;
}

/* Open and close buttons */
.lunaramoon-side-menu .wp-block-navigation__responsive-container-open svg,
.lunaramoon-side-menu .wp-block-navigation__responsive-container-close svg {
	width: 30px;
	height: 30px;
}

.lunaramoon-side-menu .wp-block-navigation__responsive-container-close {
	color: #ffffff;
}

/* Book covers: tall like a real book, with a soft glow */
.wp-block-image.is-style-storybook.lunaramoon-cover img {
	aspect-ratio: 2 / 3;
	border-radius: 4px 12px 12px 4px;
	box-shadow: -6px 0 0 #3b2150, 0 18px 40px -12px rgba(0, 0, 0, 0.8), 0 0 50px rgba(185, 154, 214, 0.25);
}

/* Small tags like "Original story" */
.lunaramoon-tag {
	display: inline-block;
	padding: 0.2em 0.8em;
	border-radius: 999px;
	background: rgba(196, 22, 47, 0.12);
	border: 1px solid rgba(196, 22, 47, 0.4);
}

/* Dialogue scripts, shown like a page from a playbook */
.wp-block-preformatted.lunaramoon-script {
	white-space: pre-wrap;
	font-family: var(--wp--preset--font-family--cormorant);
	font-size: 1.2rem;
	line-height: 1.55;
	color: #1a1420;
	background: none;
	border: none;
	padding: 0;
	margin: 0;
}

/* ---------- Contact form ---------- */
.lunaramoon-form label {
	display: block;
	font-family: var(--wp--preset--font-family--cormorant);
	font-size: 1.25rem;
	font-weight: 700;
	color: #3b2150;
	margin-bottom: 0.35rem;
}

.lunaramoon-form input[type="email"],
.lunaramoon-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.8rem 1rem;
	font: inherit;
	color: #1a1420;
	background: #fffdf8;
	border: 1px solid #d9c39c;
	border-radius: 8px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.lunaramoon-form input[type="email"]:focus,
.lunaramoon-form textarea:focus {
	outline: none;
	border-color: #6a3b8c;
	box-shadow: 0 0 0 3px rgba(106, 59, 140, 0.2);
}

.lunaramoon-form textarea {
	resize: vertical;
	min-height: 9rem;
}

.lunaramoon-form button {
	cursor: pointer;
	border: none;
	padding: 0.8em 1.8em;
	border-radius: 6px;
	font-weight: 600;
	color: #ffffff;
	background: #6a3b8c;
}

.lunaramoon-form button:hover {
	background: #3b2150;
	box-shadow: 0 0 22px rgba(95, 211, 194, 0.45);
}

.lunaramoon-form-trap {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.lunaramoon-form-notice {
	padding: 0.8rem 1rem;
	border-radius: 8px;
	font-weight: 600;
}

.lunaramoon-form-notice.is-success {
	background: #e7f4ef;
	color: #17291f;
	border: 1px solid #3f7a5e;
}

.lunaramoon-form-notice.is-error {
	background: #fbe3e6;
	color: #4a0812;
	border: 1px solid #c4162f;
}

/* ---------- Contact form layout: topics, name + email side by side, message ---------- */
.lunaramoon-form { display: flex; flex-direction: column; gap: 0.9rem; }
.lunaramoon-form p { margin: 0; }

.lunaramoon-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.lunaramoon-form-topics { border: 0; margin: 0 0 0.4rem; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.lunaramoon-form-topics legend {
	font-family: var(--wp--preset--font-family--cormorant);
	font-size: 1.35rem; font-weight: 700; color: #3b2150; margin-bottom: 0.6rem; padding: 0;
}

.lunaramoon-form .lunaramoon-check {
	display: flex; align-items: center; gap: 0.6rem;
	font-family: var(--wp--preset--font-family--raleway); font-size: 1rem; font-weight: 400; color: #1a1420;
	margin: 0; cursor: pointer;
}
.lunaramoon-check input {
	width: 1.25rem; height: 1.25rem; margin: 0; flex: none;
	accent-color: #6a3b8c; cursor: pointer;
}

.lunaramoon-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
@media (max-width: 600px) { .lunaramoon-form-row { grid-template-columns: 1fr; } }

.lunaramoon-form input[type="text"],
.lunaramoon-form input[type="email"],
.lunaramoon-form textarea {
	width: 100%; box-sizing: border-box;
	padding: 1rem 1.1rem; font: inherit; font-size: 1rem; color: #1a1420;
	background: #fffdf8; border: 1px solid #b9a27c; border-radius: 8px;
}
.lunaramoon-form input::placeholder, .lunaramoon-form textarea::placeholder { color: #5a4b63; opacity: 1; }
.lunaramoon-form input[type="text"]:focus { outline: none; border-color: #6a3b8c; box-shadow: 0 0 0 3px rgba(106, 59, 140, 0.2); }

/* In the editor the form is a preview, so typing in it is switched off */
.lunaramoon-form-preview .lunaramoon-form { pointer-events: none; }