/**
 * Panda Resort - what theme.json cannot say: the header over the photos,
 * the motion, the frosted panels, the grid of experiences, the bar of the
 * phones, and the blocks of Pandao Booking in the style of the theme.
 *
 * @package PandaResort
 */

:root {
	--pr-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--pr-header-height: var(--wp--custom--header--height, 84px);
	--pr-admin-bar: var(--wp-admin--admin-bar--height, 0px);
}

html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--wp--preset--color--accent);
	color: #fff;
}

h1,
h2,
.wp-block-heading {
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

h1 em,
h2 em,
.wp-block-heading em {
	color: inherit;
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-weight: 400;
}

/* Small capitals above a title */

.is-style-eyebrow {
	align-items: center;
	color: var(--wp--preset--color--accent);
	display: flex;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	gap: 0.9em;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

.is-style-eyebrow::before {
	background: var(--wp--preset--color--coral);
	content: "";
	flex: none;
	height: 2px;
	width: 2.2rem;
}

.is-style-eyebrow.has-text-align-center {
	justify-content: center;
}

.has-white-color.is-style-eyebrow,
.is-style-eyebrow.has-white-color {
	color: #fff;
}

/* Header */

.pr-header {
	backdrop-filter: saturate(160%) blur(14px);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	background: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 7%, transparent);
	position: sticky;
	top: var(--pr-admin-bar);
	transition: background-color 0.35s var(--pr-ease), border-color 0.35s, color 0.35s, box-shadow 0.35s;
	z-index: 100;
}

.pr-header__inner {
	min-height: var(--pr-header-height);
}

.pr-header .wp-block-site-logo img {
	transition: filter 0.35s;
}

.pr-header .wp-block-navigation a {
	text-decoration: none;
}

.pr-header .wp-block-navigation-item__content {
	position: relative;
}

.pr-header .wp-block-navigation-item__content::after {
	background: currentColor;
	bottom: -0.35em;
	content: "";
	height: 1.5px;
	left: 0;
	position: absolute;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.35s var(--pr-ease);
	width: 100%;
}

.pr-header .wp-block-navigation-item__content:hover::after,
.pr-header .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* Over a photo: transparent and white, solid again once the page scrolls. */

.has-overlay-header .pr-header {
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border-color: transparent;
	color: #fff;
	left: 0;
	position: fixed;
	right: 0;
}

.has-overlay-header .pr-header .wp-block-site-logo img {
	filter: brightness(0) invert(1);
}

.has-overlay-header .pr-header .wp-block-site-title a,
.has-overlay-header .pr-header .wp-block-navigation {
	color: #fff;
}

.has-overlay-header .pr-header .pr-header__book .wp-block-button__link {
	background: #fff;
	color: var(--wp--preset--color--ink);
}

.has-overlay-header.is-scrolled .pr-header {
	backdrop-filter: saturate(160%) blur(14px);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	background: color-mix(in srgb, var(--wp--preset--color--base) 90%, transparent);
	border-color: color-mix(in srgb, var(--wp--preset--color--ink) 7%, transparent);
	box-shadow: 0 10px 30px rgba(10, 26, 64, 0.06);
	color: var(--wp--preset--color--body);
}

.has-overlay-header.is-scrolled .pr-header .wp-block-site-logo img {
	filter: none;
}

.has-overlay-header.is-scrolled .pr-header .wp-block-site-title a,
.has-overlay-header.is-scrolled .pr-header .wp-block-navigation {
	color: var(--wp--preset--color--ink);
}

.has-overlay-header.is-scrolled .pr-header .pr-header__book .wp-block-button__link {
	background: var(--wp--preset--color--ink);
	color: #fff;
}

/* The menu of the phones */

.pr-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--deep);
	color: #fff;
	padding: clamp(1.5rem, 6vw, 3rem);
}

.pr-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	gap: 1.1rem;
	padding-top: 3.5rem;
}

.pr-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2rem, 9vw, 3rem);
	font-weight: 400;
	letter-spacing: 0;
}

@media (max-width: 599px) {
	.pr-header .wp-block-buttons.pr-header__book {
		display: none;
	}
}

/* First screen: the photo, its title and the booking bar */

.pr-hero.wp-block-cover {
	min-height: max(560px, 100svh);
	overflow: hidden;
	padding-bottom: clamp(1.25rem, 4vw, 3rem);
	padding-top: calc(var(--pr-header-height) + 2rem);
}

.pr-hero .wp-block-cover__inner-container {
	align-self: flex-end;
}

.pr-hero h1 {
	color: #fff;
	text-shadow: 0 2px 30px rgba(10, 26, 64, 0.25);
}

.pr-hero__lead {
	max-width: 34rem;
	text-shadow: 0 1px 18px rgba(10, 26, 64, 0.45);
}

.pr-hero .pr-rise {
	animation: pr-rise 1.1s var(--pr-ease) both;
}

.pr-hero .pr-rise:nth-child(2) {
	animation-delay: 0.12s;
}

.pr-hero .pr-rise:nth-child(3) {
	animation-delay: 0.24s;
}

.pr-hero .pr-rise:nth-child(4) {
	animation-delay: 0.38s;
}

.pr-scroll-hint {
	animation: pr-float 2.4s ease-in-out infinite;
	opacity: 0.8;
}

.is-style-slow-zoom .wp-block-cover__image-background,
.is-style-slow-zoom .wp-block-cover__video-background {
	animation: pr-zoom 22s var(--pr-ease) both;
}

@keyframes pr-zoom {
	from {
		transform: scale(1.14);
	}

	to {
		transform: scale(1);
	}
}

@keyframes pr-rise {
	from {
		opacity: 0;
		transform: translateY(26px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

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

	50% {
		transform: translateY(6px);
	}
}

/* Frosted glass over a photo, and the search of Pandao Booking inside it */

.is-style-glass {
	backdrop-filter: saturate(150%) blur(18px);
	-webkit-backdrop-filter: saturate(150%) blur(18px);
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.32);
	border-radius: var(--wp--custom--radius--large);
	box-shadow: 0 30px 70px rgba(10, 26, 64, 0.28);
	color: #fff;
}

.is-style-glass .pdb {
	margin: 0;
}

.is-style-glass .pdb .pdb-search {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
}

.is-style-glass .pdb label {
	color: rgba(255, 255, 255, 0.86);
}

.is-style-glass .pdb input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.is-style-glass .pdb select {
	background-color: rgba(255, 255, 255, 0.96);
	border-color: transparent;
}

.is-style-glass .pdb .pdb-search__submit .pdb-button {
	background: var(--wp--preset--color--coral);
	box-shadow: 0 10px 26px rgba(224, 122, 95, 0.4);
}

/* Appear as the page scrolls (only once the script is there). */

.pr-js .pr-reveal {
	opacity: 0;
	transform: translateY(34px);
	transition: opacity 1s var(--pr-ease), transform 1s var(--pr-ease);
}

.pr-js .pr-reveal.is-revealed {
	opacity: 1;
	transform: none;
}

/* A photo band stays in place: its words appear, not the band, which would leave a strip of page. */
.pr-js .wp-block-cover.pr-reveal {
	opacity: 1;
	transform: none;
}

.pr-js .wp-block-cover.pr-reveal > .wp-block-cover__inner-container {
	opacity: 0;
	transform: translateY(34px);
	transition: opacity 1s var(--pr-ease), transform 1s var(--pr-ease);
}

.pr-js .wp-block-cover.pr-reveal.is-revealed > .wp-block-cover__inner-container {
	opacity: 1;
	transform: none;
}

.pr-js .pr-reveal-group > * {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.9s var(--pr-ease), transform 0.9s var(--pr-ease);
}

.pr-js .pr-reveal-group.is-revealed > * {
	opacity: 1;
	transform: none;
}

.pr-js .pr-reveal-group.is-revealed > *:nth-child(2) {
	transition-delay: 0.1s;
}

.pr-js .pr-reveal-group.is-revealed > *:nth-child(3) {
	transition-delay: 0.2s;
}

.pr-js .pr-reveal-group.is-revealed > *:nth-child(4) {
	transition-delay: 0.3s;
}

.pr-js .pr-reveal-group.is-revealed > *:nth-child(5) {
	transition-delay: 0.4s;
}

/* The story: two photos stacked, figures */

.pr-stack {
	position: relative;
}

.pr-stack .pr-stack__front {
	border: 10px solid var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--medium);
	bottom: -12%;
	box-shadow: var(--wp--preset--shadow--lifted);
	left: -14%;
	position: absolute;
	width: 52%;
}

.pr-stack .pr-stack__front img {
	border-radius: calc(var(--wp--custom--radius--medium) - 6px);
}

.pr-figures .pr-figure__number {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.6rem, 5vw, 3.6rem);
	line-height: 1;
	margin-bottom: 0.2em;
}

.pr-figures .pr-figure__label {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

@media (max-width: 781px) {
	.pr-stack .pr-stack__front {
		bottom: -8%;
		left: auto;
		right: 4%;
		width: 46%;
	}
}

/* Experiences: a grid of photos, one tall */

.pr-bento {
	display: grid;
	gap: clamp(0.75rem, 1.6vw, 1.25rem);
	grid-auto-rows: clamp(220px, 24vw, 320px);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pr-bento > .wp-block-cover {
	border-radius: var(--wp--custom--radius--medium);
	margin: 0;
	min-height: 0;
	overflow: hidden;
}

.pr-bento > .pr-bento__tall {
	grid-row: span 2;
}

.pr-bento > .pr-bento__wide {
	grid-column: span 2;
}

.pr-bento .wp-block-cover__image-background {
	transition: transform 1.2s var(--pr-ease);
}

.pr-bento .wp-block-cover:hover .wp-block-cover__image-background {
	transform: scale(1.06);
}

.pr-bento .wp-block-cover__inner-container {
	align-self: flex-end;
}

.pr-bento h3 {
	color: #fff;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.6rem, 2.4vw, 2.2rem);
	font-weight: 400;
	margin: 0;
}

.pr-bento p {
	color: rgba(255, 255, 255, 0.86);
	font-size: var(--wp--preset--font-size--small);
	margin: 0.2em 0 0;
}

@media (max-width: 899px) {
	.pr-bento {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599px) {
	.pr-bento {
		grid-auto-rows: 240px;
		grid-template-columns: minmax(0, 1fr);
	}

	.pr-bento > .pr-bento__tall,
	.pr-bento > .pr-bento__wide {
		grid-column: auto;
		grid-row: auto;
	}
}

/* Reviews: a large quote */

.pr-quote {
	font-family: var(--wp--preset--font-family--display);
}

.pr-stars {
	color: var(--wp--preset--color--ink);
	letter-spacing: 0.25em;
}

/* Rooms and photos that lift */

.pr-lift img {
	transition: transform 1s var(--pr-ease);
}

.pr-lift:hover img {
	transform: scale(1.04);
}

.pr-lift .wp-block-image,
.pr-lift figure {
	overflow: hidden;
}

/* Title of the pages */

.pr-page-head {
	position: relative;
}

.pr-page-head h1 {
	max-width: 14ch;
}

/* Footer */

.pr-footer a {
	color: inherit;
	text-decoration: none;
}

.pr-footer a:hover {
	color: #fff;
	text-decoration: underline;
}

.pr-footer .wp-block-site-logo img {
	filter: brightness(0) invert(1);
}

.pr-footer .wp-block-navigation {
	color: rgba(255, 255, 255, 0.78);
}

/* The bar of the phones: the booking always at hand */

.pr-mobile-book {
	display: none;
}

@media (max-width: 781px) {
	.pr-mobile-book {
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		background: color-mix(in srgb, var(--wp--preset--color--base) 92%, transparent);
		border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 8%, transparent);
		bottom: 0;
		box-shadow: 0 -10px 30px rgba(10, 26, 64, 0.08);
		display: block;
		left: 0;
		padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
		position: fixed;
		right: 0;
		transform: translateY(110%);
		transition: transform 0.45s var(--pr-ease);
		z-index: 90;
	}

	/* Once the first screen and its search are passed. */
	.is-past-hero .pr-mobile-book {
		transform: none;
	}

	.pr-mobile-book .wp-block-button,
	.pr-mobile-book .wp-block-button__link {
		width: 100%;
	}

	body:has(.pr-mobile-book) {
		padding-bottom: 4.6rem;
	}

	/* The pages of the booking have their own bar. */
	.pandao-booking-accommodations .pr-mobile-book,
	.pandao-booking-checkout .pr-mobile-book,
	.pandao-booking-booking .pr-mobile-book,
	.pandao-booking-accommodation .pr-mobile-book {
		display: none;
	}

	.pandao-booking-accommodations:has(.pr-mobile-book),
	.pandao-booking-checkout:has(.pr-mobile-book),
	.pandao-booking-booking:has(.pr-mobile-book),
	.pandao-booking-accommodation:has(.pr-mobile-book) {
		padding-bottom: 0;
	}
}

/* Pandao Booking in the style of the theme */

.pdb,
.pdb-calendar {
	--pdb-radius: 16px;
}

.pdb .pdb-button {
	border-radius: 999px;
	letter-spacing: 0.1em;
}

.pdb .pdb-checkout__section h2,
.pdb .pdb-summary__title,
.pdb .pdb-offers__title,
.pdb .pdb-card-item__title,
.pdb .pdb-booking__reference {
	font-family: var(--wp--preset--font-family--body);
}

.pdb .pdb-booking-box > h2,
.pdb .pdb-activity-book h2 {
	font-size: var(--wp--preset--font-size--x-large);
}

.wp-block-pandao-booking-accommodation.alignwide,
.wp-block-pandao-booking-accommodations.alignwide {
	margin-top: var(--wp--preset--spacing--40);
}

/* Less motion, for those who ask */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.is-style-slow-zoom .wp-block-cover__image-background,
	.pr-hero .pr-rise,
	.pr-scroll-hint {
		animation: none;
	}

	.pr-js .pr-reveal,
	.pr-js .pr-reveal-group > *,
	.pr-js .wp-block-cover.pr-reveal > .wp-block-cover__inner-container {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.pr-bento .wp-block-cover__image-background,
	.pr-lift img {
		transition: none;
	}
}

/* The title of the site, when no logo is set */

.pr-header .wp-block-site-logo ~ .pr-header__title {
	display: none;
}

/* Buttons: outline, and light outline on a photo or a dark band */

.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	border: 1.5px solid currentColor;
	color: var(--wp--preset--color--ink);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: #fff;
}

.wp-block-button.is-style-light > .wp-block-button__link {
	background: transparent;
	border: 1.5px solid rgba(255, 255, 255, 0.7);
	color: #fff;
}

.wp-block-button.is-style-light > .wp-block-button__link:hover {
	background: #fff;
	color: var(--wp--preset--color--ink);
}

/* Full-width photos keep the margins of the site, as the header does. */

.wp-block-cover.alignfull {
	padding-left: 0;
	padding-right: 0;
}

.wp-block-cover.alignfull > .wp-block-cover__inner-container {
	padding-left: var(--wp--style--root--padding-left);
	padding-right: var(--wp--style--root--padding-right);
}

/*
 * Full-width bands follow each other with no gap, and the footer follows the
 * content: the gap WordPress puts between blocks belongs to the texts.
 */

.wp-block-post-content > .alignfull + .alignfull,
.wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: 0;
}