/*
Theme Name: Hans Arnout Swart
Theme URI: https://hansarnoutswart.nl
Author: Swart Werk
Description: Portfolio theme for painter Hans Arnout Swart, built from the Figma design "Website Hans Arnout".
Version: 1.1.0
Requires at least: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: hans-arnout
*/

/* ==========================================================================
   Settings – change colours, font and spacing here
   ========================================================================== */
:root {
	--color-text: #000;
	--color-bg: #fff;
	--overlay: rgba(255, 255, 255, 0.97);

	--font: "Avenir Next", "Avenir", "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--weight-light: 200;   /* Ultra Light */
	--weight-regular: 400; /* Regular */
	--weight-medium: 500;  /* Medium */
	--weight-bold: 600;    /* Demi Bold */

	--sidebar: 240px;      /* width of the name + menu column */
	--gutter-left: 57px;   /* space left of the name */
	--gutter-right: 84px;  /* space right of the paintings */
	--top: 152px;          /* space above the paintings */
	--gap: 15px;           /* space between paintings */
	--content-max: 1116px; /* 3 columns of 362px */

	--radius: 3px;
	--shadow: 4px 4px 8px rgba(0, 0, 0, 0.25);
}

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

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font);
	font-size: 16px;
	font-weight: var(--weight-regular);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.lightbox-open {
	overflow: hidden;
}

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

a {
	color: inherit;
	text-decoration: none;
}

a:focus-visible,
button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 8px;
	z-index: 1000;
	padding: 8px 12px;
	background: var(--color-bg);
}

.skip-link:focus {
	left: 8px;
}

/* ==========================================================================
   Layout: menu column on the left, content on the right
   ========================================================================== */
.site {
	display: grid;
	grid-template-columns: var(--sidebar) minmax(0, 1fr);
	min-height: 100vh;
}

.site-header {
	position: sticky;
	top: 0;
	align-self: start;
	padding: 66px 16px 40px var(--gutter-left);
	max-height: 100vh;
	overflow-y: auto;
}

.site-main {
	padding: var(--top) var(--gutter-right) 80px 0;
	min-width: 0;
}

.site-main > * {
	max-width: var(--content-max);
}

/* Name */
.site-title {
	display: inline-block;
	font-size: 24px;
	font-weight: var(--weight-bold);
	line-height: 30px;
}

/* Menu */
.nav {
	margin-top: 49px;
}

.nav__list,
.nav__sub {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav__item {
	line-height: 36px;
}

.nav__item.is-current > a {
	font-weight: var(--weight-medium);
}

.nav__sub {
	padding-left: 10px;
	margin-bottom: 4px;
}

.nav__subitem {
	line-height: 33px;
}

.nav__sub.has-active .nav__subitem > a {
	font-weight: var(--weight-light);
}

.nav__sub.has-active .nav__subitem.is-current > a {
	font-weight: var(--weight-regular);
}

.nav a:hover {
	font-weight: var(--weight-medium);
}

.nav__sub a:hover,
.nav__sub.has-active .nav__subitem > a:hover {
	font-weight: var(--weight-regular);
}

/* Menu button (phones only) */
.nav-toggle {
	display: none;
}

/* ==========================================================================
   Painting grid (masonry)
   ========================================================================== */
.grid {
	--cols: 3; /* read by the script */
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--gap);
	align-items: start;
}

/* Once the script runs, it places every tile itself (see site.js). */
.grid.is-masonry {
	display: block;
	position: relative;
}

.grid.is-masonry .painting {
	position: absolute;
}

.painting {
	margin: 0;
}

.painting--wide {
	grid-column: span 2;
}

.painting__link {
	display: block;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	overflow: hidden;
	cursor: pointer;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.painting__link:hover {
	box-shadow: 6px 6px 14px rgba(0, 0, 0, 0.3);
}

.painting__img {
	width: 100%;
	border-radius: var(--radius);
}

.painting__caption {
	/* Shown in the popup; hidden in the grid. */
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

.grid__empty {
	grid-column: 1 / -1;
}

/* ==========================================================================
   Caption (title / technique / size)
   ========================================================================== */
.caption {
	display: flex;
	flex-direction: column;
	margin: 0;
	font-size: 16px;
	font-weight: var(--weight-regular);
	line-height: 25px;
	text-align: right;
}

.caption__title {
	font-weight: var(--weight-medium);
}

/* ==========================================================================
   Popup (lightbox) and single painting page
   ========================================================================== */
.lightbox {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: var(--sidebar);
	z-index: 100;
	background: var(--overlay);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.lightbox.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.25s ease;
}

.close-button {
	position: absolute;
	top: 68px;
	right: 72px;
	z-index: 2;
	display: block;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	line-height: 0;
}

.close-button img {
	width: 24.0355px;
	height: 24.0355px;
}

.viewer {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: end;
	column-gap: 24px;
	height: 100%;
	padding: 138px 85px 0;
	align-content: start;
}

.viewer__frame {
	grid-column: 2;
	position: relative;
	line-height: 0;
}

.viewer__img {
	width: auto;
	height: auto;
	max-height: 68vh;
	max-width: min(calc(100vw - var(--sidebar) - 420px), 1000px);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	transition: opacity 0.2s ease;
}

.viewer__img.is-loading {
	opacity: 0;
}

.viewer__caption {
	grid-column: 3;
	justify-self: end;
	margin-bottom: -7px;
}

/* The arrow buttons are tall invisible areas at the left and right; hovering one shows its arrow. */
.lightbox__nav {
	position: absolute;
	top: 20%;
	bottom: 30%;
	z-index: 2;
	display: flex;
	align-items: center;
	width: 140px;
	padding: 0 10px;
	border: 0;
	background: none;
	cursor: pointer;
	line-height: 0;
}

/* Arrows fade away shortly after the popup opens and return on mouse movement or hover. */
.lightbox__nav {
	opacity: 0;
	transition: opacity 0.6s ease;
}

.lightbox.show-nav .lightbox__nav,
.lightbox__nav:hover,
.lightbox__nav:focus-visible {
	opacity: 1;
	transition-duration: 0.2s;
}

@media (hover: none) {
	/* Touch screens: no hovering possible, so keep the arrows visible. */
	.lightbox__nav {
		opacity: 1;
	}
}

.lightbox__nav img {
	width: 24.0355px;
	height: 24.0355px;
}

.lightbox__nav--prev {
	left: 0;
	justify-content: flex-start;
	padding-left: 50px;
}

.lightbox__nav--next {
	right: 0;
	justify-content: flex-end;
	padding-right: 72px; /* lines up with the close button */
}

/* Thin black line between the menu and the popup (as in the design) */
.lightbox::before,
.single-painting::before {
	content: "";
	position: absolute;
	top: 0;
	left: 2px;
	width: 1px;
	height: 100%;
	background: var(--color-text);
}

/* Projects: photo with a longer text beside it, centred together */
.viewer--text {
	grid-template-columns: minmax(0, 1fr) auto minmax(240px, 340px) minmax(0, 1fr);
	column-gap: 40px;
}

.viewer--text .viewer__img {
	max-width: calc(100vw - var(--sidebar) - 170px - 340px - 120px - 80px);
}

.viewer--text .viewer__caption {
	grid-column: 3;
	justify-self: start;
	text-align: left;
	margin-bottom: -5px;
}

.caption__text {
	display: block;
	margin-top: 10px;
}

.caption__text p {
	margin: 0 0 12px;
}

.caption__text p:last-child {
	margin-bottom: 0;
}

/* Single painting page */
.single-painting {
	position: relative;
	margin-top: calc(-1 * var(--top));
	margin-right: calc(-1 * var(--gutter-right));
	max-width: none;
	min-height: 100vh;
}

.single-painting .viewer {
	height: auto;
}

.single-painting__text {
	max-width: 703px;
	margin: 48px auto 0;
	padding: 0 85px;
}

/* ==========================================================================
   Text pages (Statement, CV, Contact)
   ========================================================================== */
.text-page {
	display: grid;
	grid-template-columns: minmax(0, 703px);
	column-gap: 48px;
	padding-top: 21px;
	padding-left: 2px;
}

.text-page.has-image {
	grid-template-columns: minmax(0, 703px) minmax(0, 362px);
}

.entry {
	line-height: 35px;
}

.entry > :first-child {
	margin-top: 0;
}

.entry p,
.entry ul,
.entry ol {
	margin: 0 0 35px;
}

.entry h2,
.entry h3 {
	font-size: 16px;
	font-weight: var(--weight-medium);
	line-height: 35px;
	margin: 35px 0 0;
}

.entry blockquote {
	margin: 0 0 35px;
	padding: 0 0 0 20px;
	border-left: 1px solid var(--color-text);
	font-style: italic;
}

.entry blockquote p {
	margin: 0;
}

/* Temporary texts, clearly marked until they are replaced */
.entry .is-placeholder {
	color: #8a8780;
	margin-bottom: 35px;
}

.entry .is-placeholder p:last-child {
	margin-bottom: 0;
}

.entry strong {
	font-weight: var(--weight-medium);
}

/* Lists such as the exhibition overview: year | description, no lines */
.entry .wp-block-table {
	margin: 0 0 35px;
}

.entry table {
	border-collapse: collapse;
	width: 100%;
}

.entry td {
	padding: 0;
	border: 0;
	vertical-align: top;
}

.entry td:first-child {
	width: 80px;
	white-space: nowrap;
}

.entry a {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.entry img {
	border-radius: var(--radius);
}

.text-page__image {
	margin: 2px 0 0;
}

.text-page__image .caption {
	margin-top: 16px;
}

.shadowed {
	width: 100%;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

/* ==========================================================================
   Smaller laptops
   ========================================================================== */
@media (max-width: 1200px) {
	:root {
		--sidebar: 210px;
		--gutter-left: 40px;
		--gutter-right: 40px;
	}

	.text-page.has-image {
		grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
	}
}

/* ==========================================================================
   Tablets and phones
   ========================================================================== */
@media (max-width: 900px) {
	:root {
		--top: 24px;
		--gutter-right: 20px;
	}

	.site {
		display: block;
	}

	.site-header {
		position: sticky;
		top: 0;
		z-index: 50;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		padding: 20px;
		background: var(--color-bg);
		max-height: none;
		overflow: visible;
	}

	.site-title {
		font-size: 20px;
		line-height: 25px;
	}

	.nav-toggle {
		display: block;
		width: 44px;
		height: 44px;
		margin-right: -10px;
		padding: 0;
		border: 0;
		background: none;
		cursor: pointer;
		color: var(--color-text);
	}

	.nav-toggle__bars,
	.nav-toggle__bars::before,
	.nav-toggle__bars::after {
		display: block;
		width: 22px;
		height: 2px;
		margin: 0 auto;
		background: currentColor;
		transition: transform 0.2s ease, opacity 0.2s ease;
	}

	.nav-toggle__bars {
		position: relative;
	}

	.nav-toggle__bars::before,
	.nav-toggle__bars::after {
		content: "";
		position: absolute;
		left: 0;
	}

	.nav-toggle__bars::before {
		top: -7px;
	}

	.nav-toggle__bars::after {
		top: 7px;
	}

	.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
		background: transparent;
	}

	.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
		transform: translateY(7px) rotate(45deg);
	}

	.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
		transform: translateY(-7px) rotate(-45deg);
	}

	.nav {
		display: none;
		flex-basis: 100%;
		margin-top: 16px;
	}

	.nav.is-open {
		display: block;
	}

	.site-main {
		padding: var(--top) 20px 60px;
	}

	.grid {
		--cols: 2;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		--gap: 12px;
	}

	.text-page,
	.text-page.has-image {
		grid-template-columns: minmax(0, 1fr);
		padding: 0;
	}

	.text-page__image {
		max-width: 362px;
		margin-top: 0;
	}

	.text-page__image .caption {
		text-align: left;
	}

	/* Popup covers the whole screen; long project texts can scroll */
	.lightbox {
		left: 0;
		overflow-y: auto;
	}

	.viewer {
		height: auto;
		min-height: 100%;
	}

	.close-button {
		top: 26px;
		right: 20px;
	}

	.viewer {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 16px;
		padding: 80px 20px 40px;
	}

	.viewer__img {
		max-width: 100%;
		max-height: 70vh;
	}

	.viewer__caption {
		align-self: center;
		text-align: center;
		margin: 0;
	}

	.lightbox__nav {
		width: 64px;
	}

	.lightbox__nav--prev {
		padding-left: 14px;
	}

	.lightbox__nav--next {
		padding-right: 14px;
	}

	.lightbox::before,
	.single-painting::before {
		display: none;
	}

	.viewer--text .viewer__img {
		max-width: 100%;
	}

	.viewer--text .viewer__caption {
		justify-self: auto;
		align-self: stretch;
		max-width: none;
	}

	.single-painting {
		margin: 0;
		min-height: 0;
	}

	.single-painting .viewer {
		padding: 40px 0 0;
	}

	.single-painting .close-button {
		top: 0;
		right: 0;
	}

	.single-painting__text {
		padding: 0;
	}
}

@media (max-width: 560px) {
	.grid {
		--cols: 1;
		grid-template-columns: minmax(0, 1fr);
	}

	.painting--wide {
		grid-column: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
	}
}