/*
 * Erika Vink — Theme CSS
 *
 * Minimal styling. All page layout controlled by Erika via blocks.
 * This file only styles: header nav, artwork grid/modal/sort,
 * and functional elements.
 */

/* Kadence Blocks global variables */
:root {
	--global-content-width: 1200px;
	--global-calc-content-width: 1200px;
	--global-wide-content-width: 100%;
	--global-calc-wide-content-width: 100%;
	--global-row-edge-padding: 32px;
	--global-kb-spacing-xs: 8px;
	--global-kb-spacing-sm: 16px;
	--global-kb-spacing-md: 32px;
	--global-kb-spacing-lg: 64px;
	--global-kb-spacing-xl: 96px;
	--global-kb-spacing-xxl: 128px;
}

/* -----------------------------------------------
   Header: centered nav with hamburger on mobile
   ----------------------------------------------- */

.site-header {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 40px 24px 24px;
}

.site-header__title {
	font-family: 'Cormorant Unicase', Georgia, serif;
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 400;
	color: var(--wp--preset--color--text);
	margin: 0 0 12px;
	letter-spacing: 0.05em;
}

.site-header__title a {
	text-decoration: none;
	color: inherit;
}

.site-header__nav {
	display: flex;
	gap: 32px;
	align-items: center;
}

.site-header__link {
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1;
	color: var(--wp--preset--color--text);
	text-decoration: none;
}

.site-header__link:hover {
	color: var(--wp--preset--color--accent);
}

.site-header__lang {
	position: absolute;
	left: 32px;
	top: 50%;
	transform: translateY(-50%);
	list-style: none;
	padding: 0;
	margin: 0;
}

.site-header__lang li {
	list-style: none;
}

.site-header__lang a {
	display: block;
}

.site-header__lang img {
	display: block;
	width: 20px;
	height: auto;
	opacity: 0.6;
	transition: opacity 200ms ease;
}

.site-header__lang img:hover {
	opacity: 1;
}

.site-header__hamburger {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--wp--preset--color--text);
	padding: 8px;
}

.site-header__hamburger svg {
	width: 24px;
	height: 24px;
}

/* Mobile overlay */
.site-header__overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: var(--wp--preset--color--background);
	z-index: 300;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 32px;
}

.site-header__overlay[data-open="true"] {
	display: flex;
}

.site-header__overlay-close {
	position: absolute;
	top: 24px;
	right: 24px;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--wp--preset--color--text);
	padding: 8px;
}

.site-header__overlay-close svg {
	width: 24px;
	height: 24px;
}

.site-header__overlay-nav {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}

.site-header__overlay-nav a {
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
	color: var(--wp--preset--color--text);
	text-decoration: none;
}

.site-header__overlay-nav a:hover {
	color: var(--wp--preset--color--accent);
}

@media (max-width: 600px) {
	.site-header__nav {
		display: none;
	}

	.site-header__hamburger {
		display: block;
		position: absolute;
		right: 24px;
		top: 50%;
		transform: translateY(-50%);
	}

	.site-header {
		flex-direction: column;
		align-items: center;
		padding: 24px;
	}

	.site-header__title {
		margin: 0;
		text-align: center;
	}

	.site-header__lang {
		left: 24px;
	}
}

/* -----------------------------------------------
   Artwork grid (masonry)
   ----------------------------------------------- */

.artwork-grid {
	/* max-width set via Customizer */
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-flow: dense;
	gap: 4px;
	margin: 0 auto;
	padding: 0 32px;
}

.artwork-grid__item {
	overflow: hidden;
	position: relative;
}

/* Mobile default: everything 1 col, 1 row */

.artwork-grid__link {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	color: inherit;
	border: none;
	padding: 0;
	background: none;
	cursor: pointer;
}

.artwork-grid__thumb {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.artwork-grid__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: opacity 200ms ease;
}

.artwork-grid__link:hover .artwork-grid__thumb img {
	opacity: 0.85;
}

.artwork-grid__sold-dot {
	position: absolute;
	bottom: 12px;
	right: 12px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--wp--preset--color--sold);
}

/* Sizes applied per breakpoint below */

/* 2 cols at 50% of max width */
@media (min-width: 650px) {
	.artwork-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.artwork-grid__item--large-landscape,
	.artwork-grid__item--large-portrait,
	.artwork-grid__item--small-landscape {
		grid-column: span 2;
	}

	.artwork-grid__thumb img {
		height: 100%;
		object-fit: cover;
	}
}

/* 3 cols at 75% of max width */
@media (min-width: 975px) {
	.artwork-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.artwork-grid__item--large-landscape {
		grid-column: span 2;
		grid-row: span 2;
	}

	.artwork-grid__item--large-portrait {
		grid-column: span 2;
		grid-row: span 2;
	}

	.artwork-grid__item--small-landscape {
		grid-column: span 2;
		grid-row: span 1;
	}

	.artwork-grid__item--small-portrait {
		grid-column: span 1;
		grid-row: span 1;
	}
}

/* 4 cols at 100% of max width */
@media (min-width: 1300px) {
	.artwork-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.artwork-grid__item--large-landscape {
		grid-column: span 3;
		grid-row: span 2;
	}

	.artwork-grid__item--large-portrait {
		grid-column: span 2;
		grid-row: span 2;
	}

	.artwork-grid__item--small-landscape {
		grid-column: span 2;
		grid-row: span 1;
	}

	.artwork-grid__item--small-portrait {
		grid-column: span 1;
		grid-row: span 1;
	}
}

/* -----------------------------------------------
   Artwork modal (detail overlay)
   ----------------------------------------------- */

.artwork-modal {
	border: none;
	padding: 0;
	margin: auto;
	position: relative;
	background: var(--wp--preset--color--surface);
	/* max-width set via Customizer */
	width: fit-content;
	max-width: calc(100vw - 8px);
	max-height: calc(100vh - 8px);
	overflow-y: auto;
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
}

.artwork-modal::backdrop {
	background: rgba(255, 255, 255, 0.85);
}

.artwork-modal__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.artwork-modal__close {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 10;
	background: none;
	border: none;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
	color: var(--wp--preset--color--text-muted);
	text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color 200ms ease;
}

.artwork-modal__close:hover {
	color: var(--wp--preset--color--text);
}

.artwork-modal__image {
	flex: 0 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
}

.artwork-modal__image img {
	max-width: min(100%, calc(100vw - 8px));
	max-height: calc(100vh - 200px);
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

.artwork-modal__meta {
	flex: 0 1 auto;
	min-width: 0;
	overflow-wrap: break-word;
	padding: 16px 16px 16px 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.artwork-modal__title {
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
	line-height: 1.3;
	margin: 0 0 16px;
}

.artwork-modal__details {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--text-muted);
	line-height: 1.8;
}

.artwork-modal__status {
	font-style: italic;
	color: var(--wp--preset--color--text-muted);
	margin: 16px 0;
}

.artwork-modal__status--sold {
	color: var(--wp--preset--color--sold);
}

.artwork-modal__enquire {
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	color: var(--wp--preset--color--background);
	background: var(--wp--preset--color--text);
	padding: 16px 24px;
	text-decoration: none;
	display: inline-block;
	transition: background-color 200ms ease;
}

.artwork-modal__enquire:hover {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--background);
}

@media (max-width: 700px) {
	.artwork-modal__meta {
		padding: 16px;
	}
}

/* -----------------------------------------------
   Sort nav dropdown (under "Artwork" in header)
   ----------------------------------------------- */

.sort-nav {
	position: relative;
	display: flex;
	align-items: center;
}

.sort-nav__trigger {
	background: none;
	border: none;
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1;
	color: var(--wp--preset--color--text);
	cursor: pointer;
	padding: 0;
	margin: 0;
	letter-spacing: inherit;
	vertical-align: baseline;
}

.sort-nav__trigger:hover {
	color: var(--wp--preset--color--accent);
}

.sort-nav__menu {
	text-align: center;
}

.sort-nav__menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	background: var(--wp--preset--color--background);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	padding: 12px 0;
	min-width: 140px;
	z-index: 200;
	list-style: none;
	margin: 8px 0 0;
}

.sort-nav__menu.is-open {
	display: block;
}

.sort-nav__menu a {
	display: block;
	padding: 8px 24px;
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--text-muted);
	text-decoration: none;
	white-space: nowrap;
}

.sort-nav__menu a:hover {
	color: var(--wp--preset--color--text);
}

.sort-nav__menu a.is-active {
	color: var(--wp--preset--color--text);
	font-weight: 500;
}

/* -----------------------------------------------
   Artwork detail (single/inquiry page)
   ----------------------------------------------- */

.artwork-single__hero {
	display: flex;
	justify-content: center;
}

.artwork-single__hero img {
	max-width: 100%;
	max-height: 70vh;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

.artwork-single__inquiry-form {
	margin-top: 48px;
}

/* -----------------------------------------------
   Breadcrumb
   ----------------------------------------------- */

.breadcrumb {
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--xs);
	margin-bottom: 32px;
}

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

.breadcrumb a:hover {
	color: var(--wp--preset--color--text);
}

/* -----------------------------------------------
   Pagination
   ----------------------------------------------- */

.pagination {
	display: flex;
	justify-content: center;
	gap: 32px;
	margin-top: 64px;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--sm);
}

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

.pagination a:hover {
	color: var(--wp--preset--color--text);
}

/* -----------------------------------------------
   Language switcher
   ----------------------------------------------- */

.site-nav__lang {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap: 8px;
}

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

/* -----------------------------------------------
   Utilities
   ----------------------------------------------- */

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

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* Remove WP flow layout margins */
.site-main > * {
	margin-block-start: 0;
}

/* Content alignment — matches grid width and padding */
.wp-block-post-content > *:not(.artwork-grid):not(.sort-nav) {
	max-width: var(--erika-content-max, 1000px);
	margin-left: auto;
	margin-right: auto;
	padding-left: 32px;
	padding-right: 32px;
	box-sizing: border-box;
}

/* -----------------------------------------------
   About / CV page
   ----------------------------------------------- */

.about-page.wp-block-group {
	padding: 0;
}

.about-page .cv-entry {
	gap: 0;
	padding: 2px 0;
}

.about-page .wp-block-separator {
	border: none;
	height: 1px;
}