/*
 * Bujar LUCA: site styles. Tokens (colours, fonts, sizes) are in theme.json
 * and used here as var(--wp--preset--*). Measurements of the old site:
 * docs/design/LIVE-DESIGN.md.
 *
 * Mobile first. From 900px the page sits in a white frame: 100px bars on
 * every side, the header in the top bar, the footer (and slideshow captions)
 * in the bottom bar.
 */

:root {
	--ink: var(--wp--preset--color--ink);
	--paper: var(--wp--preset--color--paper);
	--accent: var(--wp--preset--color--accent);
	--display: var(--wp--preset--font-family--display);
	--frame: 0px;
	--bar: 2.625rem; /* Header height below 900px. */
	--gap: 0.75rem;
	--menu-width: min(16.25rem, 80vw);
	--ease: cubic-bezier(.86, 0, .07, 1);
}

@media (min-width: 900px) {
	:root {
		--frame: 6.25rem;
		--bar: 6.25rem;
	}
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link:focus {
	z-index: 100;
	top: 0.5rem;
	left: 0.5rem;
	width: auto;
	height: auto;
	padding: 0.5rem 1rem;
	clip-path: none;
	background: var(--ink);
	color: #fff;
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

button {
	font: inherit;
	color: inherit;
	cursor: pointer;
}

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

.site-header {
	position: absolute;
	z-index: 30;
	inset: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--bar);
	padding: 0 3.25rem;
	background: #fff;
}

@media (min-width: 900px) {
	.site-header {
		position: fixed;
		padding: 0 var(--frame);
	}
}

.site-title {
	margin: 0;
	font-family: var(--display);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 0.1em;
	white-space: nowrap;
}

.site-title a {
	color: var(--ink);
	text-decoration: none;
}

@media (min-width: 481px) {
	.site-title { font-size: 1.25rem; }
}

@media (min-width: 601px) {
	.site-title { font-size: 1.5625rem; }
}

@media (min-width: 1000px) {
	.site-title { font-size: 2.375rem; }
}

.menu-toggle {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	height: var(--bar);
	min-width: 2.75rem;
	padding: 0 0.75rem;
	border: 0;
	background: none;
	color: var(--ink);
}

.menu-toggle__label {
	display: none;
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

@media (min-width: 481px) {
	.menu-toggle__label { display: inline; }
}

.menu-toggle:hover {
	color: var(--accent);
}

/* Burger: three bars that turn into a cross. */
.menu-toggle__icon,
.menu-toggle__icon::before,
.menu-toggle__icon::after,
.menu-toggle__icon span {
	display: block;
	width: 1.625rem;
	height: 3px;
	border-radius: 3px;
	background: currentColor;
}

.menu-toggle__icon {
	position: relative;
	background: none;
}

.menu-toggle__icon::before,
.menu-toggle__icon::after {
	content: "";
	position: absolute;
	left: 0;
	transition: transform 0.4s var(--ease);
}

.menu-toggle__icon::before { top: -7px; }
.menu-toggle__icon::after { top: 7px; }

.menu-toggle__icon span {
	transition: opacity 0.2s;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon span { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon::before { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon::after { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Menu panel ---------- */

.site-menu {
	position: fixed;
	z-index: 40;
	top: 0;
	right: 0;
	bottom: 0;
	width: var(--menu-width);
	padding: 3.5rem 0 1.5rem;
	overflow-y: auto;
	background: var(--ink);
	color: #fff;
	clip-path: inset(0 0 0 100%);
	visibility: hidden;
	transition: clip-path 0.5s var(--ease), visibility 0s 0.5s;
}

.site-menu.is-open {
	clip-path: inset(0);
	visibility: visible;
	transition: clip-path 0.5s var(--ease);
}

@media (min-width: 900px) {
	/* Inside the frame, under the header's MENU button. */
	.site-menu {
		top: var(--frame);
		right: var(--frame);
		bottom: var(--frame);
		padding-top: 0.75rem;
	}
}

.site-menu__close {
	position: absolute;
	top: 0;
	right: 0;
	width: 3rem;
	height: 3rem;
	border: 0;
	background: none;
	color: #fff;
	font-size: 2rem;
	line-height: 1;
}

@media (min-width: 900px) {
	/* The header's toggle closes it. */
	.site-menu__close { display: none; }
}

.site-menu__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-menu__list a {
	display: block;
	padding: 0.75rem 1.5rem;
	color: #fff;
	font-size: var(--wp--preset--font-size--menu);
	line-height: 1.625;
	text-decoration: none;
	text-transform: uppercase;
}

.site-menu__list a:hover,
.site-menu__list a[aria-current="page"] {
	color: #7fb6e6; /* Accent lightened for contrast on ink. */
}

/* ---------- Main area and footer ---------- */

.site-main {
	min-height: calc(100svh - var(--bar));
	margin: var(--bar) 0 0;
}

@media (min-width: 900px) {
	.site-main {
		min-height: calc(100svh - 2 * var(--frame));
		margin: var(--frame);
	}
}

.site-footer {
	padding: 1.25rem 1.5rem;
	background: #fff;
	color: var(--ink);
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
}

.site-footer p {
	margin: 0;
}

.site-footer a {
	color: var(--ink);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--rule);
	text-underline-offset: 3px;
}

@media (min-width: 900px) {
	/* Pages that scroll: the footer ends the page, under the content. */
	body:not(.has-stage) .site-main {
		margin-bottom: 0;
	}

	.site-footer {
		padding: 2rem var(--frame);
		text-align: left;
	}

	/* Full-frame slideshows (home, series): nothing scrolls, the footer is
	 * the bottom bar of the frame. */
	.has-stage .site-footer {
		position: fixed;
		z-index: 20;
		inset: auto 0 0;
		display: flex;
		align-items: flex-end;
		height: var(--frame);
		padding: 0 var(--frame) 1.5rem;
		text-align: left;
	}
}

/* ---------- Text pages (L'artiste, contact, legal, Journal) ---------- */

.text-page {
	background: var(--paper);
}

.text-page__body {
	max-width: calc(var(--wp--style--global--content-size) + 3rem);
	margin: 0 auto;
	padding: 1.5rem 1.5rem 3rem;
}

@media (min-width: 900px) {
	.text-page__body { padding: 2.25rem 1.5rem 4.5rem; }
}

.page-title {
	margin: 0 0 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 2px solid var(--ink);
	font-family: var(--display);
	font-size: var(--wp--preset--font-size--title);
	font-weight: 600;
	line-height: 1.25;
}

.entry-content {
	overflow-wrap: break-word; /* Long bare links in the bio (YouTube URLs). */
}

.entry-content > * {
	margin-block: 0 1.5rem;
}

.entry-content h2 {
	margin-top: 2.25rem;
}

.entry-content hr,
.entry-content .wp-block-separator {
	margin-block: 1.5rem;
	border: 0;
	border-top: 1px dotted var(--ink);
}

.post-meta {
	margin: -0.75rem 0 1.5rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--meta);
}

/* Portrait on the left, text on the right (pages with a featured image). */
.split-page__image {
	margin: 0;
	background: var(--paper);
}

/* Phones and tablets: the picture leaves room for the title on the first screen. */
.split-page__image img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 55svh;
	margin: 0 auto;
	padding-top: 1.5rem;
}

@media (min-width: 900px) {
	.split-page:has(.split-page__image) {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}

	.split-page__image {
		position: sticky;
		top: var(--frame);
		display: flex;
		align-items: center;
		justify-content: center;
		height: calc(100svh - 2 * var(--frame));
		border-right: 0.75rem solid var(--ink);
	}

	.split-page__image img {
		width: auto;
		max-width: 92%;
		max-height: 100%;
		padding-top: 0;
		object-fit: contain;
	}

	.split-page:has(.split-page__image) .text-page__body {
		margin: 0;
		padding-inline: 2.25rem;
	}
}

/* Contact details in two columns. */
.entry-content .wp-block-columns {
	gap: 1.5rem;
}

/* Journal list. */
.journal__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.journal__list > li {
	padding: 1.5rem 0;
	border-bottom: 1px dotted var(--ink);
}

.journal__title {
	margin: 0 0 0.375rem;
	font-size: 1.375rem;
}

.journal__title a {
	color: var(--wp--preset--color--black);
	text-decoration: none;
}

.journal__title a:hover {
	color: var(--accent);
}

.journal .post-meta {
	margin: 0;
}

/* ---------- Œuvres / Projets grid ---------- */

.is-dark .site-main {
	background: var(--ink);
}

.mosaic {
	margin: 0;
	padding: var(--gap);
	list-style: none;
	column-count: 2;
	column-gap: var(--gap);
}

@media (min-width: 900px) {
	.mosaic { column-count: 3; }
}

@media (min-width: 1250px) {
	.mosaic { column-count: 4; }
}

@media (min-width: 1700px) {
	.mosaic { column-count: 5; }
}

/* mosaic.js: flex columns filled left to right. */
.mosaic.is-placed {
	display: flex;
	gap: var(--gap);
	column-count: auto;
}

.mosaic__column {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: var(--gap);
	min-width: 0;
}

.mosaic__item {
	break-inside: avoid;
	margin-bottom: var(--gap);
}

.mosaic.is-placed .mosaic__item {
	margin: 0;
}

.mosaic__link {
	position: relative;
	display: block;
	color: #fff;
	text-decoration: none;
}

.mosaic__image {
	display: block;
	width: 100%;
}

.mosaic__link::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity 0.2s;
}

.mosaic__label {
	position: absolute;
	z-index: 1;
	inset: 50% 0.75rem auto;
	transform: translateY(-50%);
	font-family: var(--display);
	font-size: clamp(1.25rem, 3vw, var(--wp--preset--font-size--title));
	font-weight: 600;
	line-height: 1.1;
	text-align: center;
	opacity: 0;
	transition: opacity 0.2s;
}

.mosaic__link:hover::after,
.mosaic__link:focus-visible::after,
.mosaic__link:hover .mosaic__label,
.mosaic__link:focus-visible .mosaic__label {
	opacity: 1;
}

/* Touch screens can't hover: names always shown. */
@media (hover: none) {
	.mosaic__link::after,
	.mosaic__label {
		opacity: 1;
	}
}

/* ---------- Slideshow ---------- */

.slideshow {
	/* Phones: as tall as the tallest image needs (--ratio, set inline), never
	 * taller than the screen, so the controls sit right under the picture. */
	--stage-h: max(16rem, min(calc(100vw * var(--ratio, 1) + 8px), calc(100svh - var(--bar) - 7.5rem)));
	position: relative;
	background: #fff;
}

.slideshow__slide {
	margin: 0 0 1.5rem;
}

.slideshow__image {
	display: block;
	margin: 0 auto;
}

.slideshow__caption {
	padding: 0.5rem 1.5rem 0;
	color: var(--ink);
	font-family: var(--display);
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.4;
	text-align: center;
}

.artwork__title {
	font-style: italic;
}

/* Controls only exist once the script runs. */
.slideshow:not(.is-enhanced) :is(.slideshow__nav, .slideshow__dots, .slideshow__fullscreen, .slideshow__info) {
	display: none;
}

.slideshow.is-enhanced .slideshow__stage {
	position: relative;
	height: var(--stage-h);
	touch-action: pan-y pinch-zoom;
}

.slideshow.is-enhanced .slideshow__slide {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 4px;
	visibility: hidden;
	opacity: 0;
}

.slideshow.is-enhanced .slideshow__slide.is-active {
	z-index: 1;
	visibility: visible;
	opacity: 1;
}

.slideshow.is-animated .slideshow__slide {
	transition: opacity 0.6s cubic-bezier(.445, .05, .55, .95), visibility 0s 0.6s;
}

.slideshow.is-animated .slideshow__slide.is-active {
	transition: opacity 0.6s cubic-bezier(.445, .05, .55, .95);
}

.slideshow.is-enhanced .slideshow__image {
	flex: 1 1 auto;
	width: 100%;
	min-height: 0;
	object-fit: contain;
}

.slideshow.is-enhanced .slideshow__caption {
	flex: none;
	min-height: 3.5rem;
	padding-bottom: 0.25rem;
}

/* Prev · counter · next under the image (room below before what follows). */
.slideshow__nav {
	padding-bottom: 1.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.slideshow__prev,
.slideshow__next {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border: 0;
	background: none;
	color: var(--ink);
}

.slideshow__prev:hover,
.slideshow__next:hover {
	color: var(--accent);
}

.slideshow__prev svg { transform: rotate(-90deg); }
.slideshow__next svg { transform: rotate(90deg); }

.slideshow__counter {
	margin: 0;
	min-width: 4.5rem;
	color: var(--ink);
	font-size: var(--wp--preset--font-size--meta);
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.slideshow__dots {
	display: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

.slideshow__dot {
	display: grid;
	place-items: center;
	width: 1.5rem;
	height: 1.125rem;
	padding: 0;
	border: 0;
	background: none;
}

.slideshow__dot::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #8a8a8a;
}

.slideshow__dot[aria-current="true"]::before {
	background: var(--ink);
}

.slideshow__dot:hover::before {
	background: var(--accent);
}

.slideshow__fullscreen,
.slideshow__info {
	position: absolute;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 0;
}

.slideshow__fullscreen {
	top: 0;
	right: 0;
	background: rgba(255, 255, 255, 0.85);
	color: var(--ink);
}

.slideshow__fullscreen:hover {
	color: var(--accent);
}

.slideshow__info {
	top: calc(var(--stage-h) - 2.75rem);
	left: 0;
	background: var(--ink);
	color: #fff;
	font-family: Georgia, serif;
	font-size: 1.25rem;
	font-style: italic;
	font-weight: 700;
}

.slideshow__info-panel {
	position: absolute;
	z-index: 2;
	left: 0;
	right: 0;
	top: var(--stage-h);
	transform: translateY(-100%);
	padding: 1.5rem 1.5rem 1.5rem 4.25rem;
	background: var(--ink);
	color: #fff;
	font-size: var(--wp--preset--font-size--meta);
	line-height: 1.8;
}

.slideshow__info-panel p {
	margin: 0;
}

.slideshow__info[aria-expanded="true"] {
	z-index: 4;
}

/* Browser fullscreen: the slideshow fills the screen. */
.slideshow.is-fullscreen {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.slideshow.is-fullscreen {
	--stage-h: calc(100vh - 7.5rem);
}

/* From 900px: the stage fills the frame; arrows in the left bar, dots in
 * the right bar, caption in the bottom bar. */
@media (min-width: 900px) {
	.slideshow--stage {
		--stage-h: calc(100svh - 2 * var(--frame));
	}

	.slideshow--stage.is-enhanced .slideshow__caption {
		position: fixed;
		z-index: 25;
		left: calc(var(--frame) + 3rem);
		right: calc(var(--frame) + 3rem);
		bottom: 3rem;
		min-height: 0;
		padding: 0;
	}

	.slideshow--stage .slideshow__nav,
	.slideshow--compact .slideshow__nav {
		padding-bottom: 0;
		position: fixed;
		z-index: 25;
		top: 50%;
		left: 0;
		flex-direction: column;
		gap: 0.75rem;
		width: var(--frame);
		transform: translateY(-50%);
	}

	.slideshow--stage .slideshow__prev svg,
	.slideshow--compact .slideshow__prev svg { transform: none; }

	.slideshow--stage .slideshow__next svg,
	.slideshow--compact .slideshow__next svg { transform: rotate(180deg); }

	.slideshow__prev,
	.slideshow__next {
		width: var(--frame);
		height: 3.75rem;
	}

	.slideshow__prev svg,
	.slideshow__next svg {
		width: 2.25rem;
		height: 2.25rem;
	}

	/* The counter moves to the right bar when there are too many dots. */
	.slideshow__counter {
		position: fixed;
		top: 50%;
		right: 0;
		width: var(--frame);
		transform: translateY(-50%);
	}

	.slideshow:not(.has-counter) .slideshow__counter {
		display: none;
	}

	.slideshow__dots {
		position: fixed;
		z-index: 25;
		top: 50%;
		right: calc(var(--frame) / 2 - 0.75rem);
		display: block;
		transform: translateY(-50%);
	}

	.slideshow.is-fullscreen {
		--stage-h: calc(100vh - 2 * var(--frame));
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-menu,
	.menu-toggle__icon::before,
	.menu-toggle__icon::after,
	.mosaic__link::after,
	.mosaic__label {
		transition: none;
	}
}

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

.project-page {
	background: var(--paper);
}

/* A 2:1 box above the project text, never taller than the screen. */
.slideshow--compact {
	--stage-h: max(12rem, min(50vw, calc(100svh - var(--bar) - 3rem)));
}

.slideshow--compact .slideshow__caption {
	min-height: 0;
	font-size: var(--wp--preset--font-size--base);
}

@media (min-width: 900px) {
	.slideshow--compact {
		--stage-h: min(calc((100vw - 2 * var(--frame)) / 2), calc(100svh - 2 * var(--frame) - 4rem));
	}

	/* Project pages scroll: arrows, counter and dots sit in the side bars
	 * next to the slideshow and scroll away with it (not pinned to the screen). */
	.slideshow--compact .slideshow__nav,
	.slideshow--compact .slideshow__dots {
		position: absolute;
		top: calc(var(--stage-h) / 2);
	}

	.slideshow--compact .slideshow__nav {
		left: calc(-1 * var(--frame));
	}

	/* Many images: "↑ 12 / 76 ↓" in the left bar. */
	.slideshow--compact .slideshow__counter {
		position: static;
		width: auto;
		transform: none;
	}

	.slideshow--compact .slideshow__dots {
		right: calc(0.75rem - var(--frame) / 2);
	}
}

.project {
	display: grid;
	gap: 1.5rem;
	padding: 1.5rem;
}

@media (min-width: 900px) {
	/* Text and image grids on the left, "Lieu d'exposition" (if any) on the right. */
	.project {
		grid-template-columns: minmax(0, 1fr) minmax(12rem, 18rem);
		gap: 2.25rem;
		padding: 2.25rem 2.625rem 4.5rem;
	}
}

.project .entry-content {
	font-size: 0.9375rem;
}

@media (min-width: 900px) {
	.project:not(:has(.project__venues)) {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Reading width for the words; image grids use the whole column. */
.project .page-title,
.project .entry-content > :not(.wp-block-gallery) {
	max-width: var(--wp--style--global--content-size);
}

.project__venues {
	align-self: start;
	font-size: var(--wp--preset--font-size--meta);
}

@media (min-width: 900px) {
	.project__venues {
		padding-top: 5.25rem; /* Level with the text under the title. */
	}
}

.project__venues-title {
	margin: 0 0 0.5rem;
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 700;
	text-transform: uppercase;
}

.project__venues ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.project__venues li + li {
	margin-top: 0.5rem;
}

/* Images in a project's text: a grid of equal squares, each work shown whole
 * on white inside it (never cropped; very tall or wide works would otherwise
 * set a whole row's height); a click opens it large (core lightbox). The
 * gallery's "Crop images" setting is off, so WordPress doesn't force a crop. An odd last thumbnail keeps its size. The gap is
 * theme.json's (styles.blocks.core/gallery): WordPress sizes the columns from it. */
.entry-content .wp-block-gallery:not(.is-cropped):not(.is-style-slideshow) figure.wp-block-image {
	flex-grow: 0;
	aspect-ratio: 1;
}

.entry-content .wp-block-gallery:not(.is-cropped):not(.is-style-slideshow) figure.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #fff;
}

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

.stage-page .stage-content > * {
	margin: 0;
}

/* ---------- Contact form (mu-plugins/bujarluca-core/contact-form.php) ---------- */

.contact-form {
	max-width: 36rem;
}

.contact-form__field {
	margin: 0 0 1.25rem;
}

.contact-form label {
	display: block;
	margin-bottom: 0.375rem;
	font-size: var(--wp--preset--font-size--meta);
}

.contact-form__required {
	color: var(--wp--preset--color--muted);
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
	display: block;
	width: 100%;
	padding: 0.75rem;
	border: 1px solid #c9cdd0; /* The old #e5e9eb is too faint to see the field. */
	border-radius: 0;
	background: #fff;
	color: var(--wp--preset--color--black);
	font: inherit;
}

.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 0;
	border-color: var(--accent);
}

.contact-form__trap {
	position: absolute;
	left: -9999px;
}

.contact-form__privacy {
	margin: 0 0 1.25rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--meta);
}

.contact-form__notice {
	margin: 0 0 1.5rem;
	padding: 0.75rem 1rem;
	border-left: 3px solid var(--accent);
	background: #fff;
}

.contact-form__notice--sent {
	border-left-color: #2e7d32;
}

/* FR · EN at the foot of the menu panel. */
.site-menu__languages {
	margin: 1.5rem 0 0;
	padding: 0.75rem 1.5rem 0;
	border-top: 1px dotted rgba(255, 255, 255, 0.4);
	color: rgba(255, 255, 255, 0.5);
	font-size: var(--wp--preset--font-size--base);
	letter-spacing: 0.08em;
}

.site-menu__languages a {
	display: inline-block;
	padding: 0.5rem 0.25rem;
	color: #fff;
	text-decoration: none;
}

.site-menu__languages a[aria-current="true"] {
	text-decoration: underline;
	text-underline-offset: 0.3em;
}