/*
 * Bluelet — styles that theme.json can't express.
 * Sections: page background · header · footer · buttons · text styles · cards ·
 * slideshow · galleries · project cards & scrolling strips · popups · motion.
 */

/* ---------- Scrollbars: thin periwinkle (from the original site) ---------- */

html, dialog.bluelet-popup { scrollbar-width: thin; scrollbar-color: var(--wp--preset--color--periwinkle) transparent; }
::-webkit-scrollbar { width: 5px; height: 5px; background: transparent; }
::-webkit-scrollbar-thumb { background: var(--wp--preset--color--periwinkle); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #555555; }

/* ---------- Page background ---------- */

body {
	background-image: url(../images/background-marble.webp);
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}

@media (max-width: 781px) {
	body { background-attachment: scroll; background-size: 100% auto; background-repeat: repeat-y; }
}

/* Remove the default gap between header, main and footer, and between full-width sections of designed pages. */
.wp-site-blocks > * + * { margin-block-start: 0; }
/* Entrance animations slide pieces in from the side; whatever sits past the screen edge must never make the page scroll sideways. `clip` (unlike `hidden`) keeps the sticky header working. */
.wp-site-blocks { overflow-x: clip; }
.wp-block-post-content.alignfull > .alignfull + .alignfull { margin-block-start: 0; }

/* ---------- Links: marker highlight (approved by the designer; no underlines anywhere) ----------
 * A soft highlight sweeps in behind a link on hover or keyboard focus. Buttons, logos, photo cards,
 * pills and icons opt out below. On dark or saturated backgrounds the highlight turns translucent white. */

:root {
	--link-marker: var(--wp--preset--color--pino);
	/* Thin circle with a long arrow, matching Back to top. Points right; rotate for other directions. */
	--icon-circle-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='31' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M54.5 32 46.5 24l-1.1 1.1 6.1 6.1H9.5v1.6h42l-6.1 6.1 1.1 1.1z'/%3E%3C/svg%3E");
}
:is(.has-bluelet-background-color, .has-esmeralda-background-color, .has-berenjena-background-color, .has-dark-periwinkle-background-color, .has-periwinkle-background-color, .site-footer__main, .cta-banner) { --link-marker: rgba(255, 255, 255, 0.3); }
:is(.has-sol-background-color, .has-pino-background-color) { --link-marker: rgba(255, 255, 255, 0.65); }

a, .rf-summary__edit {
	text-decoration: none;
	background-image: linear-gradient(var(--link-marker), var(--link-marker));
	background-repeat: no-repeat;
	background-position: 0 88%;
	background-size: 0% 45%;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	transition: background-size 0.3s ease;
}
a:is(:hover, :focus-visible), .rf-summary__edit:is(:hover, :focus-visible) { background-size: 100% 45%; text-decoration: none; }
/* Menu links have padding above and below, so their highlight sits a little higher. */
.wp-block-navigation-item__content { background-position: 0 72%; background-size: 0% 38%; }
.wp-block-navigation-item__content:is(:hover, :focus-visible) { background-size: 100% 38%; }

/* Not for buttons, images, cards, pills and icons: they have their own hover. */
:is(.wp-element-button, .wp-block-button__link, .rf-button, .back-to-top, .custom-logo-link, .wp-block-social-link-anchor, .bluelet-popup__close),
:is(.project-card, .portfolio-tile, .wp-block-post-terms, .wp-block-post-featured-image, .wp-block-image, #wpadminbar) a,
a:has(img, svg) { background-image: none; }

/* Links inside running text stay italic, so they are recognisable before anyone hovers (phones can't hover). */
:is(.wp-block-post-content, .wp-block-term-description, .how-it-works) :is(p, li, dd) a:not(.wp-element-button) { font-style: italic; }

@media (prefers-reduced-motion: reduce) { a, .rf-summary__edit { transition: none; } }

/* ---------- Header: rounded white bar that sticks to the top ---------- */

.site-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 95;
	padding: 1.5rem clamp(1rem, 4vw, 2rem) 0.75rem;
	pointer-events: none; /* only the bar itself is clickable */
}

.site-header__bar {
	pointer-events: auto;
	max-width: 1100px;
	min-height: 100px;
	margin-inline: auto;
	padding: 0.75rem 1.5rem;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--periwinkle);
	border-radius: 200px;
	box-shadow: var(--wp--custom--header--shadow);
}

.site-header .wp-block-navigation { gap: 0 2.25rem; }
.site-header .wp-block-navigation-item__content { padding: 0.3rem 0; }
.site-header .wp-block-navigation-item.current-menu-item > a,
.site-header .wp-block-navigation-item__content[aria-current="page"] { color: var(--wp--preset--color--esmeralda); }

.site-header .wp-block-site-logo img { width: 150px; height: auto; display: block; }
.site-header .wp-block-site-logo.is-in-menu { margin-inline: 0.5rem; }

/* Search: icon-only button that expands. */
.site-header .wp-block-search__button {
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--bluelet);
	padding: 0.25rem;
}
/* Use Bluelet's own thin search icon instead of the default one. */
.site-header .wp-block-search__button svg { display: none; }
.site-header .wp-block-search__button::before {
	content: "";
	display: block;
	width: 34px;
	height: 30px;
	background: currentColor;
	-webkit-mask: url(../images/search.svg) center / contain no-repeat;
	mask: url(../images/search.svg) center / contain no-repeat;
}
.site-header .wp-block-search__input {
	border: 1px solid var(--wp--preset--color--periwinkle);
	border-radius: 300px;
	padding-inline: 1rem;
	font: inherit;
	color: var(--wp--preset--color--dark-periwinkle);
}
.site-header .wp-block-search__input:focus { outline: none; border-color: var(--wp--preset--color--bluelet); box-shadow: 0 0 0 3px rgba(96, 66, 232, 0.15); }

/* The logo outside the menu is only shown on small screens, where the menu collapses. */
.site-header__mobile-logo { display: none; }

@media (max-width: 599px) {
	.site-header__bar { min-height: 72px; justify-content: space-between !important; }
	.site-header__mobile-logo { display: block; }
	.site-header__mobile-logo img { width: 110px !important; }
	.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-site-logo { display: none; }
	.site-header .is-menu-open .wp-block-navigation__container { font-size: var(--wp--preset--font-size--x-large); gap: 1.25rem; }
}

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

.site-footer a { color: inherit; }
.site-footer .wp-block-navigation { gap: 0.6rem; }
.site-footer .wp-block-navigation .wp-block-navigation-item__content { padding: 0; }
.site-footer__logo { margin: 0 0 1.25rem; }
.site-footer__logo img { width: min(350px, 100%); height: auto; }
@media (min-width: 600px) { .site-footer__logo { margin-left: -25px; } } /* the SVG has blank space on its left */
.site-footer__brand p { margin: 0; }
.site-footer__links h2 { margin: 0 0 0.75rem; font-style: italic; }

/* Photo strip: the latest projects as tall photos running off the right edge (updates by itself). */
.photo-strip { --tile: calc(100% / 4.66); overflow-x: auto; overflow-y: hidden; /* photos waiting to flip in sit 34px low; never let that make the strip scroll up/down */ scroll-snap-type: x proximity; scrollbar-width: none; background: var(--wp--preset--color--white); }
.photo-strip::-webkit-scrollbar { display: none; }
.photo-strip .wp-block-post-template { display: flex !important; flex-wrap: nowrap; gap: 0; width: max-content; min-width: 100%; margin: 0; padding: 0; }
.photo-strip .wp-block-post { flex: 0 0 calc(100vw / 4.66); margin: 0; scroll-snap-align: start; perspective: 1400px; }
.photo-strip .wp-block-post:not(:has(img)) { display: none; }
.photo-strip .wp-block-post-featured-image { margin: 0; overflow: hidden; }
.photo-strip .wp-block-post-featured-image a { display: block; }
.photo-strip .wp-block-post-featured-image img { display: block; width: 100%; height: auto; aspect-ratio: 303 / 394; object-fit: cover; border-radius: 0 !important; transition: transform 0.6s ease; }
.photo-strip .wp-block-post-featured-image a:hover img { transform: scale(1.05); }

.site-footer__bar .wp-block-group, .site-footer__bar .wp-block-social-links { align-items: center; }
.site-footer__bar p { margin: 0; }

@media (max-width: 599px) {
	.site-footer__main { text-align: center; }
	.site-footer__logo { margin-inline: auto; }
	.site-footer__links { flex-direction: column !important; gap: 1.75rem; }
	.site-footer__links > .wp-block-column { flex-basis: auto !important; }
	.site-footer__links .wp-block-navigation, .site-footer__links .wp-block-navigation__container { align-items: center !important; justify-content: center !important; }
	.photo-strip .wp-block-post { flex-basis: 40vw; }
	.site-footer__bar { flex-direction: column; justify-content: center !important; gap: 0.75rem; }
}

/* "Got a vision?" banner */
.cta-banner { overflow: hidden; }
.cta-banner__photo { align-self: flex-end; margin-block-end: 0; }
/* On wide screens the photo is pinned to the banner's right edge, so the swirl that runs off the photo's edge
 * runs off the screen edge too instead of ending in a visible cut in the middle of the banner. */
@media (min-width: 782px) {
	.cta-banner { position: relative; }
	.cta-banner__photo { position: absolute; right: 0; bottom: 0; margin: 0; }
}
.cta-banner__photo img { display: block; max-height: 35vh; width: auto; margin-inline: auto; border-radius: 0 !important; }

@media (max-width: 781px) {
	.cta-banner__photo img { max-height: 16vh; margin-inline: auto 0; }
}

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

.wp-block-button__link { min-height: 66px; display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem; }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--bluelet); color: var(--wp--preset--color--white); border-color: var(--wp--preset--color--bluelet); }
.wp-block-button.is-style-outline.has-white-color > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link.has-white-color:hover { background: var(--wp--preset--color--white); color: var(--wp--preset--color--bluelet) !important; /* beats core's forced .has-white-color text colour (white on white otherwise) */ border-color: var(--wp--preset--color--white); }

/* "With arrow": adds a long arrow after the label, in the text color. */
.wp-block-button.is-style-arrow > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--bluelet);
	border-color: currentColor;
}
.wp-block-button.is-style-arrow > .wp-block-button__link:where(.has-text-color) { border-color: currentColor; }
.wp-block-button.is-style-arrow > .wp-block-button__link { padding-right: 0.9rem; gap: 1rem; }
.wp-block-button.is-style-arrow > .wp-block-button__link::after {
	content: "";
	flex: none;
	width: 36px;
	height: 36px;
	background: currentColor;
	-webkit-mask: var(--icon-circle-arrow) center / contain no-repeat;
	mask: var(--icon-circle-arrow) center / contain no-repeat;
	transition: transform 0.25s ease;
}
.wp-block-button.is-style-arrow > .wp-block-button__link:hover { background: transparent; color: inherit; text-decoration: none; }
.wp-block-button.is-style-arrow > .wp-block-button__link:hover::after { transform: translateX(4px); }
.wp-block-button.is-style-arrow > .wp-block-button__link.has-background { border-color: transparent; }
.wp-block-button.is-style-arrow > .wp-block-button__link.has-background:hover { filter: brightness(1.08); }

/* ---------- Text styles ---------- */

/* Headings follow the text color of a coloured container (unless they set their own). */
.has-text-color :where(h1, h2, h3, h4, h5, h6):not(.has-text-color) { color: inherit; }


.is-style-eyebrow {
	color: var(--wp--preset--color--esmeralda);
	font-size: 1.1rem !important;
	font-style: italic;
	font-weight: 400;
	margin-block-end: 0 !important;
}
.is-style-eyebrow + * { margin-block-start: 0.25rem !important; }

/* "Tag": small pill label, e.g. NEW! (Pino background unless another color is chosen). */
p.is-style-tag {
	display: inline-block;
	width: fit-content;
	padding: 0.4rem 1.5rem;
	border-radius: 200px;
	font-style: italic;
	line-height: 1.4;
}
p.is-style-tag:not(.has-background) { background: var(--wp--preset--color--pino); }

/* Page header: big title with an intro paragraph beside it. */
.page-header { padding-block: 1.25rem; }
.page-header .wp-block-post-title { flex: 0 1 auto; max-width: 60%; margin: 0; }
.page-header > p { flex: 1 1 0; margin: 0; }
@media (max-width: 781px) { .page-header .wp-block-post-title { max-width: 100%; } }
@media (max-width: 599px) { .page-header { flex-direction: column; align-items: flex-start !important; gap: 0.75rem !important; } .page-header > p { flex: none; } }

/* Row of short facts on a coloured band: equal columns so the items are evenly spaced; one per row on phones. */
.facts-band { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; gap: 1.5rem !important; }
.facts-band > p { margin: 0 !important; text-align: center; text-wrap: balance; }
@media (max-width: 599px) {
	.facts-band { grid-template-columns: 1fr; gap: 1.25rem !important; }
	.facts-band > p { width: 100%; }
}

/* ---------- Cards ---------- */

.is-style-card {
	border: 1px solid var(--wp--preset--color--periwinkle);
	border-radius: var(--wp--custom--radius--card);
	padding: 2rem;
}

/* Rounded corners on one side, for two images placed next to each other. */
.is-rounded-left img { border-radius: var(--wp--custom--radius--image) 0 0 var(--wp--custom--radius--image) !important; }
.is-rounded-right img { border-radius: 0 var(--wp--custom--radius--image) var(--wp--custom--radius--image) 0 !important; }
.is-rounded-top-left { border-top-left-radius: var(--wp--custom--radius--image) !important; }

/* Images that fill their column height. */
.is-fill img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Background slideshow ----------
 * A Group with the "Background slideshow" style whose first block is a Gallery.
 * The gallery images fill the group and cross-fade (theme.js), with a slow zoom.
 * Without JavaScript the first image simply stays visible. */

.wp-block-group.is-style-slideshow { position: relative; overflow: hidden; isolation: isolate; }
.wp-block-group.is-style-slideshow > .wp-block-gallery:first-child {
	position: absolute;
	inset: 0;
	z-index: -1;
	margin: 0 !important;
	display: block;
}
.wp-block-group.is-style-slideshow > .wp-block-gallery:first-child > figure {
	position: absolute !important;
	inset: 0;
	width: 100% !important;
	height: 100%;
	margin: 0 !important;
	opacity: 0;
	transition: opacity 1.2s ease;
}
.wp-block-group.is-style-slideshow > .wp-block-gallery:first-child > figure:first-child,
.wp-block-group.is-style-slideshow > .wp-block-gallery:first-child > figure.is-active { opacity: 1; }
.wp-block-group.is-style-slideshow > .wp-block-gallery:first-child.is-running > figure:first-child:not(.is-active) { opacity: 0; }
.wp-block-group.is-style-slideshow > .wp-block-gallery:first-child img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	border-radius: 0 !important;
}
.wp-block-group.is-style-slideshow > .wp-block-gallery:first-child > figure.is-active img { animation: bluelet-ken-burns 9s ease-out both; }
.wp-block-group.is-style-slideshow > * { position: relative; }
.wp-block-group.is-style-slideshow > .wp-block-gallery:first-child { position: absolute; }

@keyframes bluelet-ken-burns {
	from { transform: scale(1.15); }
	to { transform: scale(1); }
}

/* Optional purple fade over a slideshow (add the "has-hero-fade" class). */
.has-hero-fade::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--wp--preset--gradient--hero-purple);
	pointer-events: none;
}

.is-aspect-16-9 { aspect-ratio: 16 / 9; }
@media (max-width: 767px) { .is-aspect-16-9 { aspect-ratio: 2 / 3; } }

/* ---------- Galleries ---------- */

/* Masonry: two columns of photos in their natural proportions. */
.wp-block-gallery.is-style-masonry { display: block !important; columns: 2; column-gap: 16px; }
.wp-block-gallery.is-style-masonry > figure.wp-block-image {
	display: block;
	width: 100% !important;
	margin: 0 0 16px !important;
	break-inside: avoid;
}
.wp-block-gallery.is-style-masonry img { height: auto !important; border-radius: 40px !important; object-fit: initial !important; }
/* Captions sit under the photo in Bluelet blue (WordPress's default lays them over the photo on a dark band). */
.wp-block-gallery.is-style-masonry.has-nested-images figure.wp-block-image figcaption {
	position: static;
	max-height: none;
	overflow: visible;
	padding: 0.75rem 0.25rem 0;
	background: none;
	color: var(--wp--preset--color--bluelet);
	text-shadow: none;
	font-size: 1.1rem;
	font-style: italic;
	text-align: left;
}
.wp-block-gallery.is-style-masonry.has-nested-images figure.wp-block-image:has(figcaption)::before { content: none; }
.wp-block-gallery.is-style-masonry.has-nested-images figure.wp-block-image { flex-direction: column; }
@media (max-width: 767px) { .wp-block-gallery.is-style-masonry { columns: 1; } }

/* Logo row: logos centred and kept at their own proportions. */
.wp-block-gallery.is-style-logos { align-items: center; justify-content: center; }
.wp-block-gallery.is-style-logos img { object-fit: contain !important; height: auto !important; max-height: 110px; border-radius: 0 !important; }

/* ---------- Project cards ---------- */

/* Fixed 3:4 card; a project without a featured image shows a purple placeholder instead of a hole. */
.project-card {
	position: relative;
	margin: 0;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--card);
	background: linear-gradient(160deg, var(--wp--preset--color--periwinkle), var(--wp--preset--color--bluelet));
}
.project-card .wp-block-post-featured-image { margin: 0; height: 100%; }
.project-card .wp-block-post-featured-image a { display: block; height: 100%; }
.project-card .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.project-card:hover .wp-block-post-featured-image img { transform: scale(1.04); }
.project-card__overlay {
	position: absolute;
	inset: auto 0 0 0;
	padding: 3rem 1.25rem 1.25rem;
	background: linear-gradient(to top, rgba(26, 16, 96, 0.65), transparent);
	pointer-events: none;
}
.project-card__overlay .wp-block-post-title { color: var(--wp--preset--color--white); font-size: 1.1rem; margin: 0; }
.project-card__overlay a { pointer-events: auto; }
.project-card__overlay a::after { content: ""; position: absolute; inset: 0; } /* whole card clickable */

/* ---------- Scrolling strips (Query Loop with "Scrolling strip" style) ----------
 * theme.js duplicates the cards once so the strip can loop seamlessly.
 * Pure CSS animation: it never freezes, pauses on hover, and stops if the
 * visitor prefers reduced motion. */

.wp-block-query.is-style-marquee,
.wp-block-query.is-style-marquee-reverse {
	overflow: hidden;
	max-width: none !important;
	width: 100%;
	--marquee-duration: 60s;
}
.wp-block-query.is-style-marquee .wp-block-post-template,
.wp-block-query.is-style-marquee-reverse .wp-block-post-template {
	display: flex !important;
	flex-wrap: nowrap;
	gap: 12px;
	width: max-content;
	margin: 0;
	padding: 0;
	grid-template-columns: none !important;
}
.wp-block-query.is-style-marquee .wp-block-post,
.wp-block-query.is-style-marquee-reverse .wp-block-post { width: clamp(220px, 24vw, 340px); flex: none; margin: 0; }

.wp-block-query.is-marquee-ready .wp-block-post-template { animation: bluelet-marquee var(--marquee-duration) linear infinite; }
.wp-block-query.is-style-marquee-reverse.is-marquee-ready .wp-block-post-template { animation-direction: reverse; }
.wp-block-query.is-marquee-ready:hover .wp-block-post-template,
.wp-block-query.is-marquee-ready:focus-within .wp-block-post-template { animation-play-state: paused; }

@keyframes bluelet-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(calc(-50% - 6px)); } /* half = one full set of cards (+ half the gap) */
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-query.is-marquee-ready .wp-block-post-template { animation: none; }
	.wp-block-query.is-style-marquee, .wp-block-query.is-style-marquee-reverse { overflow-x: auto; overflow-y: hidden; }
	.wp-block-group.is-style-slideshow > .wp-block-gallery:first-child > figure.is-active img { animation: none; }
}

/* ---------- Popups ----------
 * Any Group with the class "is-popup" and an HTML anchor (e.g. "event-inquiry")
 * becomes a popup, opened by any link or button pointing to "#event-inquiry". */

/* Side panel that slides in from the right and stays on the right (like the old off-canvas). */
dialog.bluelet-popup {
	width: min(40vw, 640px);
	min-width: min(460px, 95vw);
	height: 100dvh;
	max-height: 100dvh;
	inset: 0 0 0 auto; /* docked to the right edge, full height */
	margin: 0;
	padding: 0;
	border: 1px solid var(--wp--preset--color--periwinkle);
	border-right: 0;
	border-radius: var(--wp--custom--radius--image) 0 0 var(--wp--custom--radius--image);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--bluelet);
	box-shadow: -20px 0 60px rgba(26, 16, 96, 0.25);
	overscroll-behavior: contain;
}
dialog.bluelet-popup[open] { animation: bluelet-slide-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
dialog.bluelet-popup[open]::backdrop { animation: bluelet-fade-in 0.6s ease; }
dialog.bluelet-popup.is-closing { animation: bluelet-slide-out 0.35s ease-in forwards; }
@keyframes bluelet-slide-in { from { transform: translateX(100%); opacity: 0.4; } to { transform: none; opacity: 1; } }
@keyframes bluelet-slide-out { to { transform: translateX(100%); opacity: 0.4; } }
@keyframes bluelet-fade-in { from { opacity: 0; } }
@media (max-width: 1024px) { dialog.bluelet-popup { width: 85vw; } }
@media (max-width: 599px) { dialog.bluelet-popup { width: 95vw; min-width: 0; } }
@media (prefers-reduced-motion: reduce) { dialog.bluelet-popup[open], dialog.bluelet-popup.is-closing { animation: none; } }
dialog.bluelet-popup::backdrop { background: rgba(26, 16, 96, 0.45); backdrop-filter: blur(3px); }
dialog.bluelet-popup > .is-popup { padding: clamp(1.5rem, 4vw, 2.5rem); margin: 0; }
.bluelet-popup__close {
	position: sticky;
	top: 0.75rem;
	float: right;
	margin: 0.75rem 0.75rem 0 0;
	width: 44px;
	height: 44px;
	border: 1px solid currentColor;
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	color: inherit;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	z-index: 1;
}
/* On the site, popups stay hidden until opened (shown inline only if JavaScript is off).
 * In the editor they show as normal sections, labelled so they're easy to find. */
@media (scripting: enabled) {
	body:not(.editor-styles-wrapper) .is-popup:not(dialog > .is-popup) { display: none; }
}
.editor-styles-wrapper .is-popup { border: 1px dashed var(--wp--preset--color--periwinkle); border-radius: var(--wp--custom--radius--card); padding: 1.5rem; }
.editor-styles-wrapper .is-popup::before { content: "Popup · opens from links to #" attr(id); display: block; font-size: 0.8rem; color: var(--wp--preset--color--esmeralda); }

/* ---------- FAQ (Details block) ---------- */

.wp-block-details summary { cursor: pointer; font-style: italic; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
	content: "";
	flex: none;
	width: 34px;
	height: 34px;
	background: currentColor;
	-webkit-mask: var(--icon-circle-arrow) center / contain no-repeat;
	mask: var(--icon-circle-arrow) center / contain no-repeat;
	transform: rotate(90deg);
	transition: transform 0.35s ease;
}
.wp-block-details[open]:not(.is-closing) summary::after { transform: rotate(-90deg); }
.wp-block-details summary:hover::after { transform: rotate(90deg) translateX(3px); }
.wp-block-details[open]:not(.is-closing) summary:hover::after { transform: rotate(-90deg) translateX(3px); }
.wp-block-details > :not(summary) { margin-block-start: 0.75rem; }
@media (prefers-reduced-motion: no-preference) {
	.wp-block-details[open] > :not(summary) { animation: bluelet-answer-in 0.4s ease both; }
}
@keyframes bluelet-answer-in { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- Home ---------- */

.home-hero { height: min(56.25vw, 88vh); min-height: 420px; gap: 0 !important; }
.home-hero__logo { width: min(50%, 640px); margin: 0 0 -1rem !important; }
.home-hero__logo img { border-radius: 0 !important; width: 100%; }
@media (max-width: 767px) { .home-hero { height: 75vh; } .home-hero__logo { width: 80%; } }

.home-feature-section { gap: 0 !important; }
.home-feature {
	width: 40%;
	padding: 1.5rem 1.5rem 2rem;
	border-top-left-radius: var(--wp--custom--radius--image);
	background-size: cover;
}
.home-feature h2 { margin-block: 0.5rem 0.75rem; }
@media (max-width: 1024px) { .home-feature { width: 60%; } }
@media (max-width: 767px) { .home-feature { width: 90%; } }

.is-flat img { border-radius: 0 !important; }

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

.about-photos { height: 60vh; min-height: 320px; }
/* The two hero photos always fill the same height (a photo's own shape must not decide it). */
.about-photos > .wp-block-column { display: flex; }
.about-photos > .wp-block-column > .wp-block-image { flex: 1 1 auto; min-width: 0; margin: 0; }
@media (max-width: 781px) { .about-photos { height: 30vh; min-height: 200px; } }
.about-cameo { opacity: 0.15; max-width: 260px; margin-inline: auto; }
.about-quote-photo { min-height: 50vh; }
.about-quote-photo img { border-radius: var(--wp--custom--radius--image); }

.wp-block-quote.is-style-plain { padding: 0; margin: 0; }
.wp-block-quote cite { display: block; margin-top: 1rem; font-size: var(--wp--preset--font-size--large); font-style: italic; }

/* ---------- Services ---------- */

.service-row { scroll-margin-top: 140px; }
.service-row .wp-block-image img { aspect-ratio: 7 / 6; object-fit: cover; width: 100%; }
@media (min-width: 782px) {
	.service-row.is-reversed > .wp-block-columns { flex-direction: row-reverse; }
}

/* ---------- Portfolio ---------- */

.portfolio-tile { position: relative; height: 100%; min-height: 220px; }
.portfolio-tile h2 { margin: 0; }
.portfolio-tile h2 a::after { content: ""; position: absolute; inset: 0; } /* whole tile clickable */
.portfolio-tile h2::after {
	content: "";
	display: block;
	width: 40px;
	height: 40px;
	margin-top: 0.75rem;
	background: currentColor;
	-webkit-mask: var(--icon-circle-arrow) center / contain no-repeat;
	mask: var(--icon-circle-arrow) center / contain no-repeat;
	transition: transform 0.2s ease;
}
.portfolio-tile:hover h2::after { transform: translateX(6px); }
.portfolio-tile a:hover { text-decoration: none; }
@media (max-width: 781px) { .portfolio-tile { min-height: 140px; } }

/* ---------- Contact ---------- */

.help-card { text-align: center; }
.help-card .wp-block-button__link { min-height: 56px; padding: 1rem 1.5rem; white-space: nowrap; }
@media (min-width: 782px) { .help-card .wp-block-buttons { flex-wrap: nowrap; } }
.contact-links a { color: inherit; }
@media (max-width: 781px) { .contact-links { flex-wrap: wrap !important; } .contact-links > .wp-block-column { flex-basis: calc(50% - 0.5rem) !important; } }

.faq-section {
	background:
		linear-gradient(rgba(0, 153, 127, 0.28), rgba(0, 153, 127, 0.28)),
		url(../images/background-marble.webp) center / cover;
}
.faq-section .wp-block-details { background: rgba(255, 255, 255, 0.35); max-width: 540px; }
.faq-photo img { display: block; width: auto; border-radius: 0 !important; }
@media (min-width: 782px) {
	.faq-section { position: relative; overflow: hidden; }
	.faq-section .faq-photo { position: absolute; right: 0; bottom: 0; margin: 0; height: 50%; max-width: 46vw; }
	.faq-section .faq-photo img { height: 100%; max-width: 100%; object-fit: contain; object-position: right bottom; }
}
@media (max-width: 781px) {
	.faq-section .faq-photo { margin: 0 calc(-1 * var(--wp--style--root--padding-right, 1rem)) 0 auto; width: 43%; }
	.faq-section .faq-photo img { width: 100%; height: auto; }
}

/* Fluent Forms (all forms on the site), styled to match the theme. */
.frm-fluent-form .ff-el-input--label label { color: var(--wp--preset--color--bluelet); font-style: italic; }
.frm-fluent-form .ff-el-form-control {
	border: 1px solid var(--wp--preset--color--periwinkle);
	border-radius: 14px;
	color: var(--wp--preset--color--dark-periwinkle);
	font-family: inherit;
}
.frm-fluent-form .ff-el-form-control:focus { border-color: var(--wp--preset--color--bluelet); box-shadow: 0 0 0 3px rgba(96, 66, 232, 0.15); }
.frm-fluent-form .ff-el-section-break .ff-el-section-title { color: var(--wp--preset--color--esmeralda); font-style: italic; font-weight: 400; font-size: 1.1rem; margin-top: 0.5rem; }
.frm-fluent-form .ff-el-section-break hr { display: none; }
.frm-fluent-form .ff-btn-submit {
	background: var(--wp--preset--color--bluelet) !important;
	color: var(--wp--preset--color--white) !important;
	border-radius: 300px !important;
	padding: 0.9rem 2.5rem !important;
	font-style: italic;
	font-size: var(--wp--preset--font-size--large) !important;
}
.frm-fluent-form .ff-btn-submit:hover { background: var(--wp--preset--color--berenjena) !important; }
.ff-message-success { border: 0 !important; box-shadow: none !important; color: var(--wp--preset--color--esmeralda); font-size: var(--wp--preset--font-size--large); font-style: italic; }
dialog.bluelet-popup > .is-popup { text-align: left; }
dialog.bluelet-popup h2 { font-size: var(--wp--preset--font-size--xx-large); padding-right: 3rem; }
.frm-fluent-form .ff-el-group { margin-bottom: 1rem; }
.frm-fluent-form .ff-el-section-break .ff-el-section-title { font-family: inherit; }

/* ---------- Project page ---------- */

@media (min-width: 782px) {
	.project-layout__info { position: sticky; top: 150px; align-self: flex-start; }
}
.project-tags a {
	display: inline-block;
	padding: 0.35rem 1.25rem;
	border-radius: 200px;
	background: var(--wp--preset--color--pino);
	color: var(--wp--preset--color--bluelet);
	font-style: italic;
	font-size: var(--wp--preset--font-size--small);
}
.project-tags .wp-block-post-terms__separator { display: none; }
.project-tags a + a { margin-inline-start: 0.4rem; }
.project-layout .wp-block-post-title { margin-block: 1rem; }
.share-row p { margin: 0; }
.wp-block-separator.is-style-wide { border-top-width: 1px; opacity: 1; }

.page-header .wp-block-query-title { flex: 0 1 auto; max-width: 60%; margin: 0; }
.page-header .wp-block-term-description { flex: 1 1 0; margin: 0; }
.page-header .wp-block-term-description p { margin: 0; }
@media (max-width: 781px) { .page-header .wp-block-query-title { max-width: 100%; } }

/* ---------- Tablets (iPad portrait) ----------
 * Core stacks columns below 782px. Two-column layouts stay side by side down to 600px
 * (keeping their set widths), so tablets get the desktop arrangement and only phones stack.
 * Rows with three or more columns still stack, to avoid cramped cards. */

@media (min-width: 600px) and (max-width: 781px) {
	.wp-block-columns:not(.is-not-stacked-on-mobile):not(:has(> .wp-block-column:nth-child(3))) { flex-wrap: nowrap !important; }
	.wp-block-columns:not(.is-not-stacked-on-mobile):not(:has(> .wp-block-column:nth-child(3))) > .wp-block-column { flex-basis: 0 !important; flex-grow: 1; }
	.wp-block-columns > .wp-block-column[style*="flex-basis:25%"] { flex-basis: 25% !important; flex-grow: 0; }
	.wp-block-columns > .wp-block-column[style*="flex-basis:35%"] { flex-basis: 35% !important; flex-grow: 0; }
	.wp-block-columns > .wp-block-column[style*="flex-basis:40%"] { flex-basis: 40% !important; flex-grow: 0; }
	.wp-block-columns > .wp-block-column[style*="flex-basis:45%"] { flex-basis: 45% !important; flex-grow: 0; }
	.wp-block-columns > .wp-block-column[style*="flex-basis:55%"] { flex-basis: 55% !important; flex-grow: 0; }
	.wp-block-columns > .wp-block-column[style*="flex-basis:60%"] { flex-basis: 60% !important; flex-grow: 0; }
	.wp-block-columns > .wp-block-column[style*="flex-basis:65%"] { flex-basis: 65% !important; flex-grow: 0; }
	.wp-block-columns > .wp-block-column[style*="flex-basis:75%"] { flex-basis: 75% !important; flex-grow: 0; }

	/* Footer: logo column narrower so both link lists fit. */
	.site-footer__main > .wp-block-columns > .wp-block-column:first-child { flex-basis: 38% !important; }
	.site-footer__main > .wp-block-columns > .wp-block-column:last-child { flex-basis: 62% !important; }
}

@media (max-width: 599px) { .home-about-photo img, .cta-banner__photo img { max-width: 75vw; } }

/* ---------- Flower Truck (Bluelet Blooms) ---------- */

.blooms-hero { margin-block-start: 0 !important; }
.blooms-hero__logo { max-width: 400px; margin-inline: auto; padding-inline: 1.5rem; }
.blooms-hero__photo { aspect-ratio: 879 / 685; }
.blooms-hero__photo img { border-radius: var(--wp--custom--radius--image) 0 0 0 !important; }
.blooms-flower { flex: none; width: 90px; margin: 0; }
.blooms-flower img { display: block; width: 90px; height: auto; }
.is-mirrored img { transform: scaleX(-1); }
.blooms-highlights h3 { margin: 0; }
.blooms-soon-photo img { aspect-ratio: 384 / 277; object-fit: cover; width: 100%; }
@media (min-width: 600px) { .blooms-row-reversed { flex-direction: row; } }
@media (max-width: 599px) {
	.blooms-row-reversed { flex-direction: column-reverse; }
	.blooms-hero__photo img { border-radius: var(--wp--custom--radius--image) var(--wp--custom--radius--image) 0 0 !important; }
}
.blooms-notice p { color: #6b5a00; margin: 0; padding-left: 2.25rem; position: relative; }
.blooms-notice p::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 1.4rem;
	height: 1.4rem;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 1 21h22L12 2zm1 15h-2v2h2v-2zm0-7h-2v5h2v-5z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 1 21h22L12 2zm1 15h-2v2h2v-2zm0-7h-2v5h2v-5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Visually hidden but read by screen readers (e.g. a page title shown as a logo). */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* The decorative "B" emblem is hidden on phones, where it would only add scrolling. */
@media (max-width: 599px) { .about-cameo { display: none; } }

/* ---------- Coming soon screen ---------- */

.coming-soon {
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: url(../images/cameo.webp) right 6% top 6% / 130px auto no-repeat;
}
.coming-soon__logo { --logo-w: min(40vw, 460px); width: var(--logo-w); margin: 0 0 0 calc(var(--logo-w) * -0.1) !important; } /* the SVG has blank space on its left */
.coming-soon__inner { width: 100%; }
@media (max-width: 599px) { .coming-soon__logo { --logo-w: 70vw; } .coming-soon { background: none; } }
.coming-soon__label { font-size: clamp(1.5rem, 3vw, 2.5rem); margin-block: 1rem 0.5rem !important; }
.coming-soon__title { font-size: var(--wp--preset--font-size--display); margin-top: 0 !important; }
.coming-soon .wp-block-button__link { min-width: min(320px, 100%); justify-content: space-between; }

/* ---------- Restaurant subscription form ---------- */

.restaurant-form {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--bluelet);
	border-radius: var(--wp--custom--radius--image);
	padding: clamp(1.5rem, 4vw, 2.5rem);
	scroll-margin-top: 140px;
}
.rf-form fieldset { border: 0; padding: 0; margin: 0 0 1.5rem; min-width: 0; }
.rf-form legend { font-size: var(--wp--preset--font-size--xx-large); font-style: italic; color: var(--wp--preset--color--bluelet); margin-bottom: 1.25rem; padding: 0; outline: none; }
.rf-step__count { display: block; font-size: 0.85rem; color: var(--wp--preset--color--esmeralda); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.25rem; }
.rf-form:not(.is-stepped) .rf-step--review, .rf-trap { display: none; }

.rf-progress { height: 4px; background: var(--wp--preset--color--lavender); border-radius: 4px; margin-bottom: 1.75rem; overflow: hidden; }
.rf-progress__fill { display: block; height: 100%; width: 25%; background: var(--wp--preset--color--bluelet); border-radius: 4px; transition: width 0.4s ease; }
.rf-form:not(.is-stepped) .rf-progress { display: none; }

.rf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 599px) { .rf-row { grid-template-columns: 1fr; } }
.rf-field { margin: 0 0 1.1rem; }
.rf-field > label, .rf-label { display: block; margin: 0 0 0.4rem; font-style: italic; color: var(--wp--preset--color--bluelet); }
.rf-field abbr { color: var(--wp--preset--color--esmeralda); text-decoration: none; }
.rf-field input:not([type=checkbox]):not([type=radio]):not([type=range]),
.rf-field select,
.rf-field textarea {
	width: 100%;
	border: 1px solid var(--wp--preset--color--periwinkle);
	border-radius: 14px;
	padding: 0.75rem 1rem;
	font: inherit;
	color: var(--wp--preset--color--dark-periwinkle);
	background: var(--wp--preset--color--white);
}
.rf-field :is(input, select, textarea):focus { outline: none; border-color: var(--wp--preset--color--bluelet); box-shadow: 0 0 0 3px rgba(96, 66, 232, 0.15); }
.rf-field textarea { resize: vertical; min-height: 90px; }
.rf-hint { display: block; margin-top: 0.35rem; font-size: 0.85rem; color: var(--wp--preset--color--periwinkle); }
.rf-field.is-invalid :is(input, select, textarea), .rf-options.is-invalid .rf-option { border-color: #d4537e; }
.rf-message { color: #b03a62; background: #fbeaf0; border-radius: 14px; padding: 0.75rem 1rem; }

/* Tap-to-select option tiles (checkboxes and radios). */
.rf-options { display: grid; gap: 0.6rem; }
.rf-options--grid { grid-template-columns: 1fr 1fr; }
.rf-options--compact { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 599px) { .rf-options--compact { grid-template-columns: 1fr 1fr; } }
.rf-option {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.7rem 1rem;
	border: 1px solid var(--wp--preset--color--periwinkle);
	border-radius: 14px;
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s;
}
.rf-option input { accent-color: var(--wp--preset--color--bluelet); width: 16px; height: 16px; flex: none; margin: 0; }
.rf-option em { color: var(--wp--preset--color--periwinkle); }
.rf-option:hover, .rf-option:has(input:checked) { border-color: var(--wp--preset--color--bluelet); background: var(--wp--preset--color--lavender); }
.rf-option:has(input:focus-visible) { outline: 2px solid var(--wp--preset--color--esmeralda); outline-offset: 2px; }

/* Budget slider. */
.rf-budget { display: block; text-align: center; font-size: var(--wp--preset--font-size--xx-large); font-style: italic; color: var(--wp--preset--color--bluelet); }
.rf-budget small { font-size: 0.9rem; color: var(--wp--preset--color--periwinkle); }
.rf-field input[type=range] { width: 100%; accent-color: var(--wp--preset--color--bluelet); }
.rf-budget__scale { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--wp--preset--color--periwinkle); }
.rf-note { display: block; margin-top: 0.5rem; padding: 0.6rem 1rem; border-radius: 14px; background: var(--wp--preset--color--pino); color: var(--wp--preset--color--berenjena); font-size: 0.9rem; }
.rf-note[hidden] { display: none; }

/* Review screen. */
.rf-summary__section { border: 1px solid var(--wp--preset--color--periwinkle); border-radius: 20px; padding: 1rem 1.25rem; margin-bottom: 1rem; }
.rf-summary__section h3 { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--wp--preset--font-size--large); margin: 0 0 0.5rem; }
.rf-summary__edit { background: none; border: 0; color: var(--wp--preset--color--esmeralda); font: inherit; font-size: 0.9rem; font-style: italic; cursor: pointer; text-decoration: none; padding: 0; }
.rf-summary dl { display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: 0.35rem 1rem; margin: 0; font-size: 0.95rem; }
.rf-summary dt { color: var(--wp--preset--color--periwinkle); }
.rf-summary dd { margin: 0; color: var(--wp--preset--color--dark-periwinkle); overflow-wrap: anywhere; }

/* Cancel / Back and Next / Send. */
.rf-nav { display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; }
.rf-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 160px;
	min-height: 60px;
	padding: 0.9rem 2rem;
	border: 1px solid var(--wp--preset--color--bluelet);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--bluelet);
	color: var(--wp--preset--color--white);
	font: inherit;
	font-size: var(--wp--preset--font-size--large);
	cursor: pointer;
	text-decoration: none;
}
.rf-button:hover { background: var(--wp--preset--color--berenjena); border-color: var(--wp--preset--color--berenjena); text-decoration: none; }
.rf-button--outline { background: transparent; color: var(--wp--preset--color--bluelet); }
.rf-button--outline:hover { background: var(--wp--preset--color--bluelet); color: var(--wp--preset--color--white); }
.rf-button:disabled { opacity: 0.6; cursor: wait; }

.rf-success { text-align: center; padding: 2rem 1rem; }
.rf-success h2 { margin-top: 0; }
.restaurant-form, .restaurant-form *, .restaurant-form *::before, .restaurant-form *::after { box-sizing: border-box; }
@media (max-width: 599px) {
	.rf-options--grid:not(.rf-options--compact) { grid-template-columns: 1fr; }
	.rf-nav { gap: 0.75rem; flex-wrap: nowrap; }
	.rf-nav .rf-button { flex: 1 1 0; min-width: 0; padding-inline: 1rem; }
}
.rs-title { font-size: clamp(2.75rem, 4.6vw, 4.25rem) !important; }

/* ---------- How it works (category steps) ---------- */

.how-it-works {
	display: grid;
	grid-template-columns: minmax(200px, 1fr) 2fr;
	gap: var(--wp--preset--spacing--50);
	color: var(--wp--preset--color--esmeralda);
}
.how-it-works__title { color: var(--wp--preset--color--esmeralda); font-style: normal; font-size: var(--wp--preset--font-size--heading); margin: 0; }
.how-it-works__emblem { display: block; width: min(220px, 70%); height: auto; margin-top: var(--wp--preset--spacing--40); opacity: 0.25; }
.how-it-works__steps { list-style: none; margin: 0; padding: 0; max-width: 640px; }
.how-it-works__step {
	display: grid;
	grid-template-columns: 4rem 1fr;
	column-gap: 0.5rem;
	position: relative;
	padding-bottom: 1.5rem;
}
.how-it-works__number { grid-row: 1; color: var(--wp--preset--color--bluelet); font-size: var(--wp--preset--font-size--x-large); line-height: 1.3; }
.how-it-works__step-title { grid-column: 2; margin: 0 0 0.5rem; color: var(--wp--preset--color--esmeralda); font-style: normal; font-size: var(--wp--preset--font-size--x-large); line-height: 1.3; }
.how-it-works__text { grid-column: 2; margin: 0; font-size: var(--wp--preset--font-size--large); line-height: 1.5; }
.how-it-works__text a { color: var(--wp--preset--color--bluelet); font-style: italic; }
/* Thin line linking each number to the next step. */
.how-it-works__step:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 0.75rem;
	top: 3rem;
	bottom: 1.75rem;
	border-left: 1px solid var(--wp--preset--color--periwinkle);
	opacity: 0.6;
}
@media (max-width: 781px) {
	.how-it-works { grid-template-columns: 1fr; }
	.how-it-works__emblem { display: none; }
	.how-it-works__step { grid-template-columns: 3rem 1fr; }
}

/* ---------- Back to top ---------- */

.back-to-top {
	position: fixed;
	right: clamp(0.75rem, 2.5vw, 2.25rem);
	bottom: clamp(0.75rem, 3vh, 2rem);
	z-index: 90;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	padding: 0.65rem 0.65rem 0.6rem;
	border-radius: 20px;
	/* Frosted panel so the button stays visible over photos and coloured sections. */
	background: rgba(255, 255, 255, 0.15);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: var(--wp--preset--color--esmeralda);
	font-style: italic;
	font-size: 0.9rem;
	text-decoration: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top.is-on-dark { color: var(--wp--preset--color--white); }
.back-to-top:hover { text-decoration: none; }
.back-to-top__circle {
	width: 72px;
	height: 72px;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	position: relative;
	transition: transform 0.2s ease;
}
.back-to-top__circle::after {
	content: "";
	position: absolute;
	inset: 0;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 9.5 24 17.5l1.1 1.1 6.1-6.1V55h1.6V12.5l6.1 6.1 1.1-1.1z'/%3E%3C/svg%3E") center / 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 9.5 24 17.5l1.1 1.1 6.1-6.1V55h1.6V12.5l6.1 6.1 1.1-1.1z'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.back-to-top:hover .back-to-top__circle { transform: translateY(-3px); }
@media (max-width: 599px) {
	.back-to-top__circle { width: 48px; height: 48px; }
	.back-to-top__label { display: none; }
}

/* ---------- "Loading magic…" screen (inc/page-loader.php) ---------- */

.page-loader { display: none; }
html.is-loading .page-loader {
	position: fixed;
	inset: 0;
	z-index: 94; /* below the sticky header, which stays visible as in the design */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
	padding: 1.5rem;
	background: var(--wp--preset--color--lavender) url(../images/background-marble.webp) center / cover;
	transition: opacity 0.6s ease, visibility 0.6s;
	/* Safety net: disappear after 6 seconds even if the script never runs. */
	animation: bluelet-loader-timeout 0.6s ease 6s forwards;
}
html.is-loaded .page-loader { opacity: 0; visibility: hidden; }
@keyframes bluelet-loader-timeout { to { opacity: 0; visibility: hidden; } }
.page-loader__emblem { width: 160px; height: auto; animation: bluelet-breathe 2.4s ease-in-out infinite; }
@keyframes bluelet-breathe { 50% { transform: scale(1.04); opacity: 0.85; } }
.page-loader__bar {
	width: min(510px, 80vw);
	height: 15px;
	border: 1px solid var(--wp--preset--color--bluelet);
	border-radius: 20px;
	background: var(--wp--preset--color--white);
	overflow: hidden;
}
.page-loader__fill { display: block; height: 100%; width: 12%; background: var(--wp--preset--color--bluelet); border-radius: 20px; transition: width 0.4s ease; }
.page-loader__text { margin: 0; font-size: var(--wp--preset--font-size--heading); font-style: italic; color: var(--wp--preset--color--bluelet); opacity: 0.85; }
@media (prefers-reduced-motion: reduce) { .page-loader__emblem { animation: none; } }

/* ---------- 404 ---------- */

.error-page { text-align: center; }
.error-page__code {
	margin-block: 0 !important;
	font-size: clamp(7rem, 22vw, 15rem);
	font-style: italic;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 2px var(--wp--preset--color--bluelet);
}
.error-page h1 { margin-top: 0.5rem; }

/* ---------- Search page ---------- */

.search-page__form .wp-block-search__inside-wrapper {
	border: 1px solid var(--wp--preset--color--bluelet) !important;
	border-radius: var(--wp--custom--radius--pill);
	background: rgba(255, 255, 255, 0.6);
	padding: 0.4rem !important;
}
.search-page__form .wp-block-search__input {
	border: 0;
	background: transparent;
	padding: 0.6rem 1.25rem;
	font: inherit;
	font-size: var(--wp--preset--font-size--x-large);
	font-style: italic;
	color: var(--wp--preset--color--bluelet);
}
.search-page__form .wp-block-search__input:focus { outline: none; }
.search-page__form .wp-block-search__inside-wrapper:focus-within { box-shadow: 0 0 0 3px rgba(96, 66, 232, 0.15); }
.search-page__form .wp-block-search__input::placeholder { color: var(--wp--preset--color--periwinkle); }
.search-page__form .wp-block-search__button {
	margin: 0;
	min-width: clamp(110px, 20%, 205px);
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--bluelet);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--large);
}
.search-page__form .wp-block-search__button:hover { background: var(--wp--preset--color--berenjena); }
.search-page__summary { font-size: var(--wp--preset--font-size--x-large) !important; font-style: italic; margin-top: 1rem !important; }

/* Category tabs: active tab keeps the marker highlight, in green. */
.search-filters ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; }
.search-filters a { font-size: var(--wp--preset--font-size--large); color: var(--wp--preset--color--bluelet); }
.search-filters a[aria-current="page"] { color: var(--wp--preset--color--esmeralda); background-size: 100% 45%; }

/* Masonry of project tiles (photo at its own shape, title and tags below). */
.wp-block-post-template.is-masonry { display: block !important; columns: 3 260px; column-gap: 1.5rem; margin: 0; padding: 0; }
.wp-block-post-template.is-masonry > li { break-inside: avoid; margin: 0 0 1.75rem !important; }
.project-tile .wp-block-post-featured-image { margin: 0; }
.project-tile .wp-block-post-featured-image img { width: 100%; height: auto; border-radius: var(--wp--custom--radius--card); transition: transform 0.6s ease; }
.project-tile .wp-block-post-featured-image a { display: block; overflow: hidden; border-radius: var(--wp--custom--radius--card); }
.project-tile:hover .wp-block-post-featured-image img { transform: scale(1.03); }
.project-tile .wp-block-post-featured-image:not(:has(img)) { display: none; }
.project-tile__title { font-size: var(--wp--preset--font-size--large) !important; font-style: normal; margin: 0.6rem 0 0.1rem !important; }
.project-tile__tags { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--wp--preset--color--periwinkle); }
.project-tile__tags a::before { content: "#"; }
.project-tile__tags .wp-block-post-terms__separator { display: none; }
.project-tile__tags a { margin-right: 0.5em; }
.project-tile > .project-tile__tags { margin-top: 0 !important; }

/* ---------- Phone header and menu (designs: Mobile menu collapsed / expanded) ---------- */

/* Items that only belong in the opened phone menu. */
.wp-block-navigation__responsive-container:not(.is-menu-open) :is(.menu-mobile-only, li:has(> .menu-mobile-only)) { display: none; }

@media (max-width: 599px) {
	/* Collapsed: plain white bar, logo left, round menu button right. */
	.site-header { padding: 0; }
	.site-header__bar {
		min-height: 0;
		padding: 1.1rem max(1.25rem, env(safe-area-inset-right, 0px)) 1.1rem max(1.25rem, env(safe-area-inset-left, 0px));
		border: 0;
		border-radius: 0;
		box-shadow: 0 6px 24px rgba(150, 176, 254, 0.18);
	}
	.site-header__mobile-logo img { width: 150px !important; }
	/* Menu buttons: the designer's icons (assets/images/menu-open.svg / menu-close.svg), drawn in the text colour. */
	.site-header .wp-block-navigation__responsive-container-open,
	.site-header .wp-block-navigation__responsive-container-close {
		width: 60px;
		height: 60px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: transparent;
		color: var(--wp--preset--color--bluelet);
	}
	.site-header .wp-block-navigation__responsive-container-open { position: relative; } /* the close button keeps WordPress's absolute top-right position */
	.site-header .wp-block-navigation__responsive-container-open svg,
	.site-header .wp-block-navigation__responsive-container-close svg { display: none; }
	.site-header .wp-block-navigation__responsive-container-open::before,
	.site-header .wp-block-navigation__responsive-container-close::before {
		content: "";
		position: absolute;
		inset: 0;
		background: currentColor;
		-webkit-mask: url(../images/menu-open.svg) center / contain no-repeat;
		mask: url(../images/menu-open.svg) center / contain no-repeat;
	}
	.site-header .wp-block-navigation__responsive-container-close::before {
		-webkit-mask-image: url(../images/menu-close.svg);
		mask-image: url(../images/menu-close.svg);
	}
	.site-header .wp-block-navigation__responsive-container-open:focus-visible,
	.site-header .wp-block-navigation__responsive-container-close:focus-visible { outline: 2px solid var(--wp--preset--color--esmeralda); outline-offset: 2px; }
	.site-header .wp-block-navigation__responsive-container-close svg { width: 30px; height: 30px; }

	/* Expanded: logo on top, full-width coloured pills, "Stay tuned!" with socials at the bottom. */
	.site-header .wp-block-navigation__responsive-container.is-menu-open { padding: 1.4rem 0 1.5rem; }
	/* Same spot as the ☰ button it replaces (the open menu has 1.4rem of top padding). */
	.site-header .wp-block-navigation__responsive-container-close { top: calc(21px - 1.4rem); right: max(1.25rem, env(safe-area-inset-right, 0px)); z-index: 2; }
	.site-header .is-menu-open .wp-block-navigation__responsive-container-content {
		min-height: calc(100dvh - 3rem);
		display: flex;
		flex-direction: column;
		align-items: stretch !important;
		gap: 0;
		padding: 0 !important;
	}
	.site-header .is-menu-open .wp-block-navigation__container { align-items: stretch !important; gap: 0 !important; width: 100%; }
	.site-header .is-menu-open .wp-block-navigation__container > li { width: 100%; box-sizing: border-box; justify-content: flex-start !important; }
	/* Core centres items in the open menu with auto margins; pin them to the design's edges instead. */
	.site-header .is-menu-open .menu-pill > a { margin: 0 auto 0 0 !important; }
	.site-header .is-menu-open .is-in-menu { margin: 0 auto 0 0 !important; }
	.site-header .is-menu-open .menu-social { margin: 0 0 0 auto !important; }
	.site-header .is-menu-open li:has(> .is-in-menu) { order: -1; display: flex; justify-content: flex-start; align-items: flex-start !important; padding: 4.5rem 1rem 2rem max(0.9rem, env(safe-area-inset-left, 0px)); }
	.site-header .is-menu-open .is-in-menu { display: block !important; margin: 0 !important; }
	.site-header .is-menu-open .is-in-menu img { width: min(290px, 72vw) !important; }
	.site-header .is-menu-open .wp-block-search { display: none; }

	.site-header .is-menu-open .menu-pill .wp-block-navigation-item__content {
		display: block;
		width: calc(100% - 12px);
		box-sizing: border-box;
		padding: 0.55rem 1rem 0.55rem max(0.8rem, env(safe-area-inset-left, 0px));
		border-radius: 0 var(--wp--custom--radius--pill) var(--wp--custom--radius--pill) 0;
		font-size: clamp(1.75rem, 8vw, 2.1rem);
		font-style: normal;
		line-height: 1.3;
		background-image: none;
	}
	.site-header .is-menu-open .menu-pill--bluelet a { background-color: var(--wp--preset--color--bluelet); color: var(--wp--preset--color--white); }
	.site-header .is-menu-open .menu-pill--esmeralda a { background-color: var(--wp--preset--color--esmeralda); color: var(--wp--preset--color--white); }
	.site-header .is-menu-open .menu-pill--sol a { background-color: var(--wp--preset--color--sol); color: var(--wp--preset--color--berenjena); }
	.site-header .is-menu-open .menu-pill--pino a { background-color: var(--wp--preset--color--pino); color: var(--wp--preset--color--berenjena); }
	.site-header .is-menu-open .menu-pill--berenjena a { background-color: var(--wp--preset--color--berenjena); color: var(--wp--preset--color--white); }
	.site-header .is-menu-open .menu-pill--periwinkle a { background-color: var(--wp--preset--color--periwinkle); color: var(--wp--preset--color--white); }
	.site-header .is-menu-open .menu-pill a:is(:hover, :focus-visible) { filter: brightness(1.07); text-decoration: none; }
	.site-header .is-menu-open .menu-pill.current-menu-item a { box-shadow: inset 6px 0 0 rgba(255, 255, 255, 0.55); }

	/* The second list (Search + socials) fills the rest of the screen so the socials sit at the bottom. */
	.site-header .is-menu-open .wp-block-navigation__responsive-container-content > ul:last-of-type { flex: 1; display: flex; flex-direction: column; }
	.site-header .is-menu-open li:has(> .menu-social) { margin-top: auto; padding: 2rem max(1.25rem, env(safe-area-inset-right, 0px)) 0 1.25rem; display: flex; justify-content: flex-end; }
	.site-header .is-menu-open .menu-social { justify-content: flex-end; align-items: center; gap: 0.75rem; }
	.site-header .is-menu-open .menu-social::before { content: "Stay tuned!"; flex-basis: 100%; text-align: right; font-size: var(--wp--preset--font-size--large); }
	.site-header .is-menu-open .menu-social { flex-wrap: wrap; }

	/* Pills slide in one after another. */
	@media (prefers-reduced-motion: no-preference) {
		.site-header .is-menu-open .menu-pill { animation: bluelet-pill-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
		.site-header .is-menu-open .menu-pill--esmeralda { animation-delay: 0.05s; }
		.site-header .is-menu-open .menu-pill--sol { animation-delay: 0.1s; }
		.site-header .is-menu-open .menu-pill--pino { animation-delay: 0.15s; }
		.site-header .is-menu-open .menu-pill--berenjena { animation-delay: 0.2s; }
		.site-header .is-menu-open .menu-pill--periwinkle { animation-delay: 0.25s; }
	}
}
@keyframes bluelet-pill-in { from { transform: translateX(-100%); } to { transform: none; } }

/* Portfolio on phones (design: Portfolio (our Work)): each category becomes one coloured card
 * with its title, arrow and a 2x2 grid of photos. Wider screens show the tile plus 3 projects. */
@media (min-width: 600px) {
	.portfolio-row .wp-block-post-template > li:nth-child(n + 4) { display: none; }
}
@media (max-width: 599px) {
	.portfolio-row { border-radius: var(--wp--custom--radius--card); padding: 1.25rem 1.25rem 1.4rem; gap: 1rem !important; }
	.portfolio-row:has(.has-esmeralda-background-color) { background: var(--wp--preset--color--esmeralda); }
	.portfolio-row:has(.has-berenjena-background-color) { background: var(--wp--preset--color--berenjena); }
	.portfolio-row:has(.has-sol-background-color) { background: var(--wp--preset--color--sol); }
	.portfolio-row:has(.has-pino-background-color) { background: var(--wp--preset--color--pino); }
	.portfolio-row .portfolio-tile { min-height: 0; padding: 0 !important; background: transparent !important; position: static; }
	.portfolio-row .portfolio-tile h2 a::after { inset: 0; } /* whole card stays clickable to the category */
	.portfolio-row { position: relative; }
	.portfolio-row .wp-block-query { position: relative; z-index: 1; }
	.portfolio-row .wp-block-post-template { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
	.portfolio-row .project-card { aspect-ratio: 1; border-radius: 16px; }
	.portfolio-row .project-card .wp-block-post-featured-image img { border-radius: 16px; }
	/* Photos only (as in the design); the project link stays, covering the photo, with its text hidden. */
	.portfolio-row .project-card__overlay { inset: 0; padding: 0; background: none; }
	.portfolio-row .project-card__overlay .wp-block-post-title a { font-size: 0; color: transparent; }
}


/* ================================================================
 * Motion (assets/js/motion.js, lightbox.js). All of it is decoration:
 * the hidden states below only exist while the script is animating.
 * ================================================================ */

/* ---------- Entrance animations (assets/js/motion.js) ----------
 * JavaScript tags pieces with class "anim" and data-anim="<effect>". A piece is hidden only while it
 * waits for its turn; adding .is-in plays it. Leaving the screen resets it, so it replays next time.
 * Easing is "expo out": a fast start with a long, soft landing. */

/* <main> is held back for an instant so pieces can take their starting positions before anything paints.
 * Fail-safe: it appears by itself after 2.5s even if the script never runs. */
html.js-anim:not(.anim-ready):not(.vt-morph) main { opacity: 0; animation: bluelet-unhide 0.01s linear 2.5s forwards; }
@keyframes bluelet-unhide { to { opacity: 1; } }

.anim { --d: 0s; --dur: 0.9s; --shift: 64px; --ease: cubic-bezier(0.16, 1, 0.3, 1); }
.anim[data-anim="pop"], .anim[data-anim="grow"] { --ease: cubic-bezier(0.34, 1.4, 0.64, 1); }

.anim[data-anim] {
	transition:
		opacity var(--dur) ease var(--d),
		transform var(--dur) var(--ease) var(--d),
		filter var(--dur) ease var(--d),
		clip-path calc(var(--dur) * 1.15) var(--ease) var(--d);
}
/* Hidden (starting) states. Going back to them is instant, because it happens off-screen. */
.anim[data-anim]:not(.is-in) { transition: none; }

.anim[data-anim="fade"]:not(.is-in) { opacity: 0; }
.anim[data-anim="rise"]:not(.is-in) { opacity: 0; transform: translateY(34px); }
.anim[data-anim="grow"]:not(.is-in) { opacity: 0; transform: translateY(40px) scale(0.93); }
.anim[data-anim="up"]:not(.is-in) { opacity: 0; transform: translateY(110px); }
.anim[data-anim="left"]:not(.is-in) { opacity: 0; transform: translateX(calc(var(--shift) * -1)); }
.anim[data-anim="right"]:not(.is-in) { opacity: 0; transform: translateX(var(--shift)); }
.anim[data-anim="pop"]:not(.is-in) { opacity: 0; transform: scale(0.6); }
.anim[data-anim="bloom"]:not(.is-in) { opacity: 0; transform: scale(0.8) rotate(-8deg); filter: blur(12px); }
.anim[data-anim="flip"]:not(.is-in) { opacity: 0; transform: perspective(900px) rotateY(-80deg); transform-origin: left center; }
.anim[data-anim="curtain"] img { clip-path: inset(-60px); transition: clip-path calc(var(--dur) * 1.15) var(--ease) var(--d), transform calc(var(--dur) * 1.5) var(--ease) var(--d); }

/* Curtain: a photo is revealed by a moving edge while it settles from a slight zoom.
 * The clip is on the photo inside, not on the element the script watches (a clipped element can look "off-screen" to the browser). */
.anim[data-anim="curtain"]:not(.is-in) img { transform: scale(1.25); transition: none; }
.anim[data-anim="curtain"]:not(.is-in)[data-dir="up"] img { clip-path: inset(100% 0 0 0); }
.anim[data-anim="curtain"]:not(.is-in)[data-dir="down"] img { clip-path: inset(0 0 100% 0); }
.anim[data-anim="curtain"]:not(.is-in)[data-dir="left"] img { clip-path: inset(0 100% 0 0); }
.anim[data-anim="curtain"]:not(.is-in)[data-dir="right"] img { clip-path: inset(0 0 0 100%); }

/* Lines: headings write in word by word from behind an invisible edge. */
.anim[data-anim="lines"] .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.06em 0.14em 0.2em; margin: -0.06em -0.14em -0.2em; }
.anim[data-anim="lines"] .wi {
	display: inline-block;
	transition: transform calc(var(--dur) * 1.1) var(--ease) calc(var(--d) + var(--i, 0) * 0.06s);
}
.anim[data-anim="lines"]:not(.is-in) .wi { transform: translateY(118%) rotate(5deg); transition: none; }

/* Phones: sideways moves become gentle rises, and wipes always come from below. */
@media (max-width: 781px) {
	.anim { --shift: 0px; }
	.anim[data-anim="left"]:not(.is-in), .anim[data-anim="right"]:not(.is-in) { transform: translateY(30px); }
	.anim[data-anim="curtain"]:not(.is-in)[data-dir="left"] img, .anim[data-anim="curtain"]:not(.is-in)[data-dir="right"] img { clip-path: inset(100% 0 0 0); }
	.anim[data-anim="up"]:not(.is-in) { transform: translateY(70px); }
}

/* "How it works": each step rises in turn, its number pops, and the line below it draws itself. */
.how-it-works__step:not(:last-child)::before { transform-origin: top; transition: transform 0.7s ease calc(var(--d, 0s) + 0.4s); }
.how-it-works__step[data-anim]:not(.is-in)::before { transform: scaleY(0); transition: none; }
.how-it-works__number { display: inline-block; transform-origin: left center; transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--d, 0s) + 0.15s); }
.how-it-works__step[data-anim]:not(.is-in) .how-it-works__number { transform: scale(0.4); transition: none; }


/* Depth: pieces tagged by the script drift at their own speed while you scroll. */
[data-parallax] { translate: 0 var(--py, 0px); }

/* Hover (mouse only): project photos tilt toward the pointer, arrow buttons lean toward it. */
@media (hover: hover) and (pointer: fine) {
	.project-card, .project-tile .wp-block-post-featured-image {
		transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
		transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
	}
	.wp-block-button.is-style-arrow > .wp-block-button__link {
		translate: var(--mx, 0px) var(--my, 0px);
		transition: translate 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease, color 0.2s ease, filter 0.2s ease;
	}
}

/* A clicked project photo morphs into the project page's first photo (Chrome, Edge, Safari). */
@media (prefers-reduced-motion: no-preference) {
	html.vt-morph .wp-block-post-content .wp-block-gallery > .wp-block-image:first-child img { view-transition-name: project-photo; }
	::view-transition-group(project-photo) { animation-duration: 0.8s; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); border-radius: 30px; overflow: clip; }
	::view-transition-old(project-photo), ::view-transition-new(project-photo) { width: 100%; height: 100%; object-fit: cover; }
}

@media print {
	.anim[data-anim]:not(.is-in) { opacity: 1 !important; transform: none !important; filter: none !important; }
	.anim[data-anim="curtain"]:not(.is-in) img { clip-path: none !important; transform: none !important; }
	.anim[data-anim="lines"]:not(.is-in) .wi { transform: none !important; }
}

/* ---------- Header slims once the page is scrolled (visual only, so nothing below it jumps) ---------- */

@media (min-width: 600px) {
	.site-header__bar { transform-origin: top center; transition: transform 0.35s ease, box-shadow 0.35s ease; }
	.site-header.is-scrolled .site-header__bar { transform: scale(0.88); box-shadow: 0 8px 36px rgba(96, 66, 232, 0.22); }
}

/* ---------- Photos fade in as they finish loading ---------- */

.img-pending { opacity: 0; }
.img-fade { animation: bluelet-img-in 0.7s ease both; }
@keyframes bluelet-img-in { from { opacity: 0; } }

/* ---------- Smooth page-to-page transitions (browsers that support them; others just load normally) ---------- */

@media (prefers-reduced-motion: no-preference) {
	@view-transition { navigation: auto; }
	::view-transition-old(root) { animation: 0.22s ease both bluelet-page-out; }
	::view-transition-new(root) { animation: 0.4s ease both bluelet-page-in; }
	.site-header { view-transition-name: site-header; }
	::view-transition-group(site-header) { animation-duration: 0s; }
}
@keyframes bluelet-page-out { to { opacity: 0; } }
@keyframes bluelet-page-in { from { opacity: 0; } }

/* ---------- Restaurant form: steps slide in from the side ---------- */

.restaurant-form { overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) {
	.rf-step.rf-slide-next { animation: bluelet-step-next 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
	.rf-step.rf-slide-back { animation: bluelet-step-back 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
}
@keyframes bluelet-step-next { from { opacity: 0; transform: translateX(48px); } }
@keyframes bluelet-step-back { from { opacity: 0; transform: translateX(-48px); } }

/* ---------- Photo viewer (project pages) ---------- */

html:has(dialog[open]) { overflow: hidden; }
.wp-block-post-content img[data-lightbox], img[data-lightbox] { cursor: zoom-in; }
.wp-block-post-content img[data-lightbox]:focus-visible { outline: 2px solid var(--wp--preset--color--esmeralda); outline-offset: 4px; }

dialog.bluelet-lightbox {
	box-sizing: border-box;
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100dvh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgba(26, 16, 96, 0.94);
	color: var(--wp--preset--color--white);
	overflow: hidden;
}
dialog.bluelet-lightbox[open] {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-areas: "prev figure next";
	align-items: center;
	gap: clamp(0.5rem, 2vw, 1.5rem);
	padding: clamp(1rem, 3vw, 2.5rem);
	animation: bluelet-fade-in 0.3s ease;
}
dialog.bluelet-lightbox.is-closing { animation: bluelet-lightbox-out 0.25s ease forwards; }
@keyframes bluelet-lightbox-out { to { opacity: 0; } }
dialog.bluelet-lightbox::backdrop { background: transparent; }

.lb-figure { grid-area: figure; margin: 0; display: grid; justify-items: center; gap: 0.75rem; min-width: 0; }
.lb-image {
	display: block;
	max-width: 100%;
	max-height: calc(100dvh - 9rem);
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 20px !important;
	opacity: 0;
	transform: scale(0.97);
	transition: opacity 0.35s ease, transform 0.35s ease;
}
.lb-image.is-in { opacity: 1; transform: none; }
.lb-caption { font-style: italic; text-align: center; max-width: 60ch; }
.lb-count { position: absolute; left: 0; right: 0; bottom: 1rem; margin: 0; text-align: center; font-style: italic; opacity: 0.85; pointer-events: none; }

.lb-button {
	position: relative;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: inherit;
	cursor: pointer;
	transition: background 0.2s ease;
}
.lb-button:hover { background: rgba(255, 255, 255, 0.2); }
.lb-button:focus-visible { outline: 2px solid var(--wp--preset--color--white); outline-offset: 3px; }
.lb-prev { grid-area: prev; }
.lb-next { grid-area: next; }
/* Long thin arrow, like the Back to top button: right-pointing for Next, mirrored for Previous. */
.lb-prev::before, .lb-next::before {
	content: "";
	position: absolute;
	inset: 12px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M54.5 32 46.5 24l-1.1 1.1 6.1 6.1H9.5v1.6h42l-6.1 6.1 1.1 1.1z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M54.5 32 46.5 24l-1.1 1.1 6.1 6.1H9.5v1.6h42l-6.1 6.1 1.1 1.1z'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.2s ease;
}
.lb-prev::before { transform: scaleX(-1); }
.lb-next:hover::before { transform: translateX(3px); }
.lb-prev:hover::before { transform: scaleX(-1) translateX(3px); }
.lb-close { position: absolute; top: clamp(0.75rem, 2vw, 1.5rem); right: clamp(0.75rem, 2vw, 1.5rem); z-index: 2; }
.lb-close::before, .lb-close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 24px; height: 1.5px; background: currentColor; }
.lb-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.lb-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.bluelet-lightbox.is-single .lb-prev, .bluelet-lightbox.is-single .lb-next { display: none; }

@media (max-width: 700px) {
	dialog.bluelet-lightbox[open] {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: minmax(0, 1fr) auto;
		grid-template-areas: "figure figure" "prev next";
		align-items: center;
		padding-top: 4.5rem;
	}
	.lb-image { max-height: calc(100dvh - 12rem); }
	.lb-prev { justify-self: start; }
	.lb-next { justify-self: end; }
	.lb-button { width: 52px; height: 52px; }
	.bluelet-lightbox.is-single[open] { grid-template-rows: 1fr; grid-template-areas: "figure figure"; }
	.lb-count { bottom: 1.8rem; }
}
@media (prefers-reduced-motion: reduce) {
	dialog.bluelet-lightbox[open], dialog.bluelet-lightbox.is-closing { animation: none; }
	.lb-image { transition: none; }
}


/* ---------- Home: transparent header over a full-screen hero; the big logo flies into the navbar ----------
 * html.hero-header is set in <head> on the front page. motion.js sets --bar-a (how filled the bar is),
 * --link-t (white -> purple links) and moves .hero-logo while you scroll. With the defaults below
 * (--bar-a: 1, --link-t: 1) the header is simply the normal solid bar, so nothing is ever unreadable. */

html.hero-header .site-header {
	position: fixed;
	inset-inline: 0;
	top: var(--wp-admin--admin-bar--height, 0px);
	transition: opacity 0.7s ease;
}
/* Held back until the script has placed the logo; fail-safe shows it after 2.5s. */
html.hero-header:not(.anim-ready) .site-header { opacity: 0; animation: bluelet-unhide 0.01s linear 2.5s forwards; }
/* While the "Loading magic" screen is up, the header stays a normal solid bar. */
html.is-loading .site-header { --bar-a: 1 !important; --link-t: 1 !important; }

html.hero-header .site-header__bar {
	background: rgb(255 255 255 / var(--bar-a, 1));
	border-color: rgb(150 176 254 / var(--bar-a, 1));
	box-shadow: 0 0 40px rgb(150 176 254 / calc(var(--bar-a, 1) * 0.25));
	transition: none;
}
html.hero-header .site-header.is-scrolled .site-header__bar { transform: none; box-shadow: 0 8px 36px rgb(96 66 232 / calc(var(--bar-a, 1) * 0.22)); }
html.hero-header .site-header { --link-color: color-mix(in srgb, #fff calc((1 - var(--link-t, 1)) * 100%), var(--wp--preset--color--bluelet)); }
html.hero-header .site-header .wp-block-navigation,
html.hero-header .site-header .wp-block-search__button { color: var(--link-color); }
html.hero-header .site-header .wp-block-navigation-item__content { text-shadow: 0 1px 14px rgb(26 16 96 / calc((1 - var(--link-t, 1)) * 0.55)); }
html.hero-header .site-header.is-hero { --link-marker: rgba(255, 255, 255, 0.28); }

/* The real logos in the page are placeholders while the flying logo is in charge. */
html.hero-ready:not(.has-modal-open) .site-header .is-in-menu img,
html.hero-ready .site-header__mobile-logo img,
html.hero-ready .home-hero__logo { visibility: hidden; }
html.hero-header .site-header .is-menu-open .wp-block-navigation-item__content { text-shadow: none; }

.hero-logo {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 97; /* above the header, so it can sit inside the bar */
	display: block;
	transform-origin: 0 0;
	pointer-events: none;
}
.hero-logo.is-docked { pointer-events: auto; }
.hero-logo__art { position: relative; display: block; width: 100%; height: 100%; }
.hero-logo__art img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: 0 !important; background: none !important; }
.hero-logo__white { opacity: var(--white-a, 1); filter: drop-shadow(0 4px 28px rgb(26 16 96 / 0.35)); }
.hero-logo__color { opacity: var(--color-a, 0); }
html.is-loading .hero-logo, html.has-modal-open .hero-logo, html.has-modal-open .hero-scroll-cue { visibility: hidden; }

/* "Scroll" cue: a thin circle with an arrow that nudges downward; fades out as you start scrolling. */
.hero-scroll-cue {
	position: fixed;
	left: 50%;
	bottom: clamp(1rem, 4vh, 2rem);
	z-index: 96;
	width: 56px;
	height: 56px;
	margin-left: -28px;
	border: 1px solid rgb(255 255 255 / 0.85);
	border-radius: 50%;
	color: #fff;
	opacity: var(--cue-a, 1);
	pointer-events: none;
}
html.is-loading .hero-scroll-cue { visibility: hidden; }
.hero-scroll-cue::after {
	content: "";
	position: absolute;
	inset: 13px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M54.5 32 46.5 24l-1.1 1.1 6.1 6.1H9.5v1.6h42l-6.1 6.1 1.1 1.1z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M54.5 32 46.5 24l-1.1 1.1 6.1 6.1H9.5v1.6h42l-6.1 6.1 1.1 1.1z'/%3E%3C/svg%3E") center / contain no-repeat;
	rotate: 90deg;
	animation: bluelet-cue 2.2s ease-in-out infinite;
}
@keyframes bluelet-cue { 50% { translate: 0 -6px; } } /* rotated 90deg, so this nudges it downward */
@media (prefers-reduced-motion: reduce) { .hero-scroll-cue::after { animation: none; } }

/* The hero fills the screen, with a soft shade at the top so white links stay readable over any photo. */
.home-hero__logo img { aspect-ratio: 2307.27 / 865.14; }
html.hero-header .home-hero { height: 100svh; min-height: 560px; }
html.hero-header .home-hero__logo { width: min(72%, 880px); margin-bottom: -2rem !important; }
html.hero-header .home-hero::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 45%;
	background: linear-gradient(to bottom, rgb(26 16 96 / 0.62), transparent);
	z-index: 0;
	pointer-events: none;
}
@media (max-width: 767px) { html.hero-header .home-hero { height: 100svh; } html.hero-header .home-hero__logo { width: 86%; margin-bottom: 0.75rem !important; } }

/* Phones: the round menu button follows the same white -> purple change. */
@media (max-width: 599px) {
	html.hero-header .site-header .wp-block-navigation__responsive-container-open { color: var(--link-color); }
}

/* "Got a vision?" on phones (design: Portfolio mobile): just the "Let's Talk" button. */
@media (max-width: 599px) { .cta-banner .cta-secondary { display: none; } }

/* ================================================================
 * Readability: the pale brand colours are great for big shapes but too faint for small text on light
 * backgrounds (checked with tools/check-contrast.mjs). Text gets a slightly deeper shade of the same
 * colour; backgrounds, big headings and photos keep the exact brand colours.
 * ================================================================ */

:root {
	--text-periwinkle: #4A63C7;       /* small text, 4.8:1 on lavender */
	--text-periwinkle-large: #6B84E6; /* headings from 24px, 3.1:1 */
	--text-gold: #7F6600;
	--text-gold-large: #9E8100;
	--text-green: #007A66;            /* small text, 4.7:1 on lavender, 5.3:1 on white */
	--text-green-faq: #006B59;        /* on the green-tinted FAQ section */
	--bg-green: #00826C;              /* under white small text, 4.8:1 */
}

/* Periwinkle text */
.has-text-color.has-periwinkle-color { color: var(--text-periwinkle) !important; }
.has-text-color.has-periwinkle-color:is(h1, h2, h3, .has-xx-large-font-size, .has-heading-font-size, .has-display-font-size) { color: var(--text-periwinkle-large) !important; }
.project-tile__tags, .search-filters .project-tile__tags { color: var(--text-periwinkle); }
.rf-hint, .rf-budget small, .rf-budget__scale, .rf-summary dt, .rf-option em { color: var(--text-periwinkle); }

/* Gold text */
.has-text-color.has-sol-dark-color { color: var(--text-gold) !important; }
.has-text-color.has-sol-dark-color:is(h1, h2, h3, .has-xx-large-font-size, .has-heading-font-size) { color: var(--text-gold-large) !important; }

/* Green text on light backgrounds: small text gets the deeper green; headings keep the brand green. */
.has-text-color.has-esmeralda-color:not(:is(h1, h2, h3, .has-heading-font-size, .has-display-font-size, .has-xx-large-font-size)),
.is-style-eyebrow, .rf-step__count, .rf-field abbr, .search-filters a[aria-current="page"],
.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item.current-menu-item > a { color: var(--text-green) !important; }
.faq-section, .faq-section :is(.has-text-color, h2, summary, p) { color: var(--text-green-faq) !important; }
.faq-section .wp-block-details summary::after { background: var(--text-green-faq); }

/* White small text on green, periwinkle and gold fills: deeper green fill / dark text. */
.wp-block-button__link.has-esmeralda-background-color, .has-esmeralda-background-color:has(> .site-footer__bar) { background-color: var(--bg-green) !important; }
.wp-block-button__link.has-periwinkle-background-color.has-white-color,
.wp-block-button__link.has-sol-dark-background-color.has-white-color,
.menu-pill--periwinkle a { color: var(--wp--preset--color--berenjena) !important; }
.is-style-arrow .wp-block-button__link.has-sol-dark-background-color { color: var(--wp--preset--color--berenjena) !important; }

.how-it-works, .how-it-works__title, .how-it-works__step-title, .how-it-works__text { color: var(--text-green); }
.how-it-works__title, .how-it-works__step-title { color: var(--wp--preset--color--esmeralda); } /* big enough for the brand green */
.has-esmeralda-background-color.has-white-color:not(.portfolio-tile) { background-color: var(--bg-green) !important; }

/* About: Nadia's cut-out portrait stands directly on top of the facts band (no gap, no background). */
.about-nadia { margin-bottom: 0 !important; }
.about-nadia + .facts-band { margin-block-start: 0 !important; }
.about-nadia .about-nadia-photo { margin: 0; line-height: 0; }
.about-nadia .about-nadia-photo img { display: block; width: 100%; height: auto; border-radius: 0 !important; }
.about-nadia > .wp-block-column { margin-bottom: 0; }
/* On phones the columns stack: text first, then the photo, so the photo is the piece that touches the band. */
@media (max-width: 599px) { .about-nadia { flex-direction: column-reverse; } .about-nadia .about-nadia-photo { max-width: 340px; margin-inline: auto; } }
/* Home "Behind Bluelet's Bold Vibes": on phones the text comes first and Nadia's photo closes the section, like on About. */
@media (max-width: 599px) { .home-nadia { flex-direction: column-reverse; } .home-nadia .wp-block-image { max-width: 340px; margin-inline: auto; } }

/* "NEW!" pill after a menu link (footer Flower Truck). */
.nav-new {
	display: inline-block;
	margin-left: 0.5em;
	padding: 0.1em 0.7em;
	border-radius: 200px;
	background: var(--wp--preset--color--pino);
	color: var(--wp--preset--color--berenjena);
	font-size: 0.75em;
	font-style: italic;
	line-height: 1.5;
	vertical-align: 0.1em;
}

/* Project page: the description written in the project editor, under the title. */
.project-layout .project-description { font-style: italic; margin: 0 0 1rem; }
.project-layout .project-description p { margin: 0; }

/* Flower Truck: "Meet the Truck" photo row (click a photo to see it large). */
.meet-truck__gallery.wp-block-gallery.has-nested-images figure.wp-block-image img { border-radius: var(--wp--custom--radius--card); aspect-ratio: 4 / 5; object-fit: cover; }
.meet-truck__gallery.wp-block-gallery.has-nested-images figure.wp-block-image { transition: transform 0.4s ease; }
.meet-truck__gallery.wp-block-gallery.has-nested-images figure.wp-block-image:hover { transform: translateY(-4px); }
@media (max-width: 599px) { .meet-truck__gallery.wp-block-gallery.has-nested-images figure.wp-block-image { width: 100% !important; } }

/* ---------- Portfolio: proposed design (blocks/portfolio-grid) ---------- */

.portfolio-grid { margin-top: var(--wp--preset--spacing--40); }
/* The block is placed "wide" in the page, but the new design must be exactly as wide as the original rows and the page title (the content width). */
.is-layout-constrained > .portfolio-grid.alignwide { max-width: var(--wp--style--global--content-size); }
.portfolio-grid__filters { margin-bottom: var(--wp--preset--spacing--40); }
.portfolio-grid__filters .nav-new { font-size: max(0.65em, 12px); }
.portfolio-grid__items { columns: 3 280px; }
.portfolio-grid__item[hidden] { display: none; }
.portfolio-grid__item.is-filtered-in { animation: bluelet-tile-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes bluelet-tile-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } }
.portfolio-grid .project-tile { position: relative; }
.portfolio-grid__pill { display: inline-block; margin: 0.6rem 0 0; padding: 0.15rem 0.8rem; border-radius: 200px; font-size: 0.8rem; font-style: italic; color: var(--wp--preset--color--white); }
.portfolio-grid__pill.has-pino-background-color, .portfolio-grid__pill.has-sol-background-color { color: var(--wp--preset--color--berenjena); }
.portfolio-grid__pill.has-esmeralda-background-color { background-color: var(--bg-green) !important; } /* the deeper green: white text on the brand green is only 3.6:1 */
.portfolio-grid .project-tile__title { margin-top: 0.3rem !important; }
.portfolio-grid__empty { text-align: center; font-style: italic; }

/* Flower Truck "coming soon" card */
.truck-teaser { border-radius: var(--wp--custom--radius--card); overflow: hidden; background: var(--wp--preset--color--bluelet); color: var(--wp--preset--color--white); }
.truck-teaser__photo { display: block; background-image: none; }
.truck-teaser__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0 !important; }
.truck-teaser__text { padding: 1.25rem 1.5rem 1.5rem; }
.truck-teaser__text h3 { color: var(--wp--preset--color--white); font-size: var(--wp--preset--font-size--x-large); margin: 0.5rem 0; }
.truck-teaser__text p { margin: 0 0 0.75rem; }
.truck-teaser__tag { display: inline-block; padding: 0.1rem 0.7rem; border-radius: 200px; background: var(--wp--preset--color--pino); color: var(--wp--preset--color--berenjena); font-size: 0.8rem; font-style: italic; margin: 0 !important; }
.truck-teaser__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0 !important; }
.truck-teaser__links a { color: var(--wp--preset--color--white); font-style: italic; }
.truck-teaser__links a::after { content: " →"; }
.truck-teaser--wide { display: grid; grid-template-columns: 1fr 1fr; align-items: center; max-width: 1000px; margin-inline: auto; }
.truck-teaser--wide .truck-teaser__photo, .truck-teaser--wide .truck-teaser__photo img { height: 100%; }
@media (max-width: 781px) { .truck-teaser--wide { grid-template-columns: 1fr; } }

/* Admin-only design switch */
.design-switch {
	position: fixed;
	left: max(1rem, env(safe-area-inset-left, 0px));
	bottom: 1rem;
	z-index: 99;
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.4rem 0.4rem 1rem;
	border-radius: 200px;
	background: var(--wp--preset--color--dark-periwinkle);
	color: var(--wp--preset--color--white);
	font: 14px/1.2 ABeeZee, sans-serif;
	box-shadow: 0 8px 24px rgba(26, 16, 96, 0.35);
}
.design-switch__label small { display: block; font-size: 11px; opacity: 0.7; }
.design-switch button { border: 0; border-radius: 200px; padding: 0.45rem 0.9rem; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.design-switch button[aria-pressed="true"] { background: var(--wp--preset--color--white); color: var(--wp--preset--color--bluelet); }

/* Flower Truck promo band (pattern bluelet/blooms-promo) */
.blooms-promo { position: relative; overflow: hidden; }
.blooms-promo .blooms-promo__photo img { border-radius: var(--wp--custom--radius--image) !important; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; box-shadow: 0 20px 50px rgba(26, 16, 96, 0.25); }
.blooms-promo h2 { margin-top: 0.5rem; }
.blooms-promo .is-style-tag { background: var(--wp--preset--color--pino); }