/*
Theme Name: Luna Dreamland
Theme URI: https://app.yuzeng202.win
Author: Luna Dreamland
Description: A soft pastel storybook child theme of Twenty Twenty-Five for the Luna Dreamland illustration series — cream paper, lavender, honey stars and arch-framed watercolor scenes.
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: luna-dreamland
*/

:root {
	--luna-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpolygon points='100,15 129.4,64.5 185.6,77.2 147.6,120.5 152.9,177.8 100,155 47.1,177.8 52.4,120.5 14.4,77.2 70.6,64.5' fill='%23000' stroke='%23000' stroke-width='22' stroke-linejoin='round'/%3E%3C/svg%3E");
	--luna-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5A7 7 0 0 1 19 9.5C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E");
	--luna-lavender-dark: #4F3D86;
}

/* ---------- Small labels & captions ---------- */

.luna-eyebrow {
	font-size: 0.85rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-3);
}

.luna-eyebrow.is-honey {
	color: var(--wp--preset--color--accent-1);
}

.luna-caption {
	font-family: var(--wp--preset--font-family--fraunces);
	font-style: italic;
	line-height: 1.45;
}

.luna-meta {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--wp--preset--color--accent-4);
}

.luna-meta-dark {
	font-size: 0.9rem;
	font-weight: 600;
	color: #C9C3DE;
}

/* ---------- Header logo ---------- */

.wp-block-image.luna-logo-star {
	margin: 0;
}

.wp-block-image.luna-logo-star img {
	display: block;
	width: 28px;
	height: 28px;
}

/* ---------- Hero arch window ---------- */

.wp-block-image.luna-arch {
	position: relative;
	max-width: 470px;
	margin-inline: auto;
}

.wp-block-image.luna-arch img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	box-sizing: border-box;
	border: 10px solid #FFFFFF;
	border-radius: 999px 999px 32px 32px;
	box-shadow: var(--wp--preset--shadow--soft);
	background: #EFE7F5;
}

.wp-block-image.luna-arch::before,
.wp-block-image.luna-arch::after {
	content: "";
	position: absolute;
	-webkit-mask: var(--luna-star) center / contain no-repeat;
	mask: var(--luna-star) center / contain no-repeat;
}

.wp-block-image.luna-arch::before {
	top: 8%;
	left: -18px;
	width: 40px;
	height: 40px;
	background: var(--wp--preset--color--accent-1);
}

.wp-block-image.luna-arch::after {
	top: 22%;
	right: -10px;
	width: 24px;
	height: 24px;
	background: #C9B6EC;
}

p.luna-nowshowing {
	position: relative;
	z-index: 1;
	width: fit-content;
	margin: -1.6rem auto 0 !important;
	padding: 0.7rem 1.25rem;
	border-radius: 999px;
	background: #FFFFFF;
	box-shadow: 0 10px 28px rgba(60, 45, 110, 0.14);
	font-size: 0.9rem;
	font-weight: 700;
}

/* ---------- Character cards ---------- */

.luna-trio-card {
	overflow: hidden;
}

.luna-trio-card > .wp-block-image {
	margin: 0;
}

.luna-trio-card > .wp-block-image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.luna-trio-card > .wp-block-image.luna-pip-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	background: #FBF3DC;
}

.luna-trio-card > .wp-block-image.luna-pip-tile img {
	width: 168px;
	aspect-ratio: 1;
	object-fit: contain;
}

.luna-trio-card > :not(.wp-block-image) {
	padding-inline: 1.75rem;
}

/* ---------- Kiki's wardrobe chips ---------- */

ul.luna-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 0;
	padding: 0;
	list-style: none;
}

ul.luna-chips li {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 10px 20px 10px 12px;
	border-radius: 999px;
	background: #FFFFFF;
	font-weight: 700;
	line-height: 1.2;
}

ul.luna-chips li::before {
	content: "";
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 20px;
	height: 20px;
	margin-right: 40px;
	border: 2px solid #FFFFFF;
	border-radius: 50%;
	background: var(--c1);
	box-shadow: 14px 0 0 -2px var(--c2), 14px 0 0 0 #FFFFFF, 28px 0 0 -2px var(--c3), 28px 0 0 0 #FFFFFF;
}

ul.luna-chips li:nth-child(1) { --c1: #A8C38A; --c2: #F1E6CF; --c3: #D8B67A; }
ul.luna-chips li:nth-child(2) { --c1: #F2B6C6; --c2: #E0596A; --c3: #F3E9E4; }
ul.luna-chips li:nth-child(3) { --c1: #A9C7EA; --c2: #F3D46B; --c3: #EDE9F3; }
ul.luna-chips li:nth-child(4) { --c1: #2F3270; --c2: #B6A2E0; --c3: #EDE9F3; }
ul.luna-chips li:nth-child(5) { --c1: #F2C9CF; --c2: #EDE6E0; --c3: #F1E3C8; }
ul.luna-chips li:nth-child(6) { --c1: #2A2A2E; --c2: #8A8790; --c3: #EDE9F3; }
ul.luna-chips li:nth-child(7) { --c1: #F4C3D3; --c2: #C7B3E6; --c3: #F1E6CF; }

/* ---------- Gallery cards ---------- */

.luna-card > .wp-block-image {
	width: 100%;
	margin: 0 0 0.5rem;
}

.luna-card > .wp-block-image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 24px;
	background: #EFE7F5;
}

.luna-card .luna-eyebrow {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.8rem;
	letter-spacing: 0.12em;
}

.luna-card .luna-eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	background: currentColor;
	-webkit-mask: var(--luna-pin) center / contain no-repeat;
	mask: var(--luna-pin) center / contain no-repeat;
}

.luna-card .luna-caption {
	font-size: 1.2rem;
	color: #3A3456;
}

.luna-card > .luna-soon {
	box-sizing: border-box;
	width: 100%;
	aspect-ratio: 4 / 5;
	margin-bottom: 0.5rem;
	padding: 2rem;
	border: 2px dashed #CDBFE6;
	border-radius: 24px;
	text-align: center;
}

.luna-soon .wp-block-image {
	margin: 0;
}

.luna-soon .wp-block-image img {
	width: 104px;
}

/* ---------- Featured (night) ---------- */

.wp-block-image.luna-rounded {
	margin: 0;
}

.wp-block-image.luna-rounded img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 28px;
	box-shadow: 0 30px 70px rgba(5, 6, 30, 0.45);
}

/* ---------- World map ---------- */

.wp-block-image.luna-frame {
	max-width: 440px;
	margin-inline: auto;
}

.wp-block-image.luna-frame img {
	display: block;
	width: 100%;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	box-sizing: border-box;
	border: 10px solid #FFFFFF;
	border-radius: 28px;
	box-shadow: var(--wp--preset--shadow--soft);
	background: #F4ECDC;
}

ul.luna-places {
	margin-bottom: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--wp--preset--color--accent-6);
}

ul.luna-places li {
	position: relative;
	margin: 0;
	padding: 18px 0 18px 36px;
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
	color: var(--wp--preset--color--accent-4);
	line-height: 1.5;
}

ul.luna-places li::before {
	content: "";
	position: absolute;
	top: 24px;
	left: 0;
	width: 20px;
	height: 20px;
	background: var(--wp--preset--color--accent-1);
	-webkit-mask: var(--luna-star) center / contain no-repeat;
	mask: var(--luna-star) center / contain no-repeat;
}

ul.luna-places strong {
	display: block;
	margin-bottom: 4px;
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: 1.3rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

ul.luna-places li.is-next strong::after {
	content: "Next stop";
	display: inline-block;
	margin-left: 10px;
	padding: 5px 11px;
	border-radius: 999px;
	background: #FBEFD2;
	color: #7A5A16;
	font-family: var(--wp--preset--font-family--nunito);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	vertical-align: 0.25em;
}

/* ---------- About ---------- */

.wp-block-image.luna-pip-md img {
	width: 88px;
}

/* ---------- Buttons ---------- */

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus {
	border-color: var(--wp--preset--color--accent-3);
	background: #FFFFFF;
	color: var(--wp--preset--color--accent-3);
}

.wp-block-button.is-style-outline.luna-btn-light .wp-block-button__link {
	border-color: var(--wp--preset--color--base);
	background: transparent;
	color: var(--wp--preset--color--base);
}

.wp-block-button.is-style-outline.luna-btn-light .wp-block-button__link:hover,
.wp-block-button.is-style-outline.luna-btn-light .wp-block-button__link:focus {
	border-color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--night);
}