/*
Theme Name: Indexwerk
Theme URI: https://wordpress.org/themes/
Author: Michel Piet
Description: Een uiterst simpel portfoliothema in de geest van Indexhibit. Vaste index links, het werk rechts. Geen franje: systeemletters, één linkkleur, en per project een keuze tussen verticaal, horizontaal of raster.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: indexwerk
Tags: portfolio, one-column, left-sidebar, minimal, custom-colors, custom-menu, featured-images
*/

/* ---------------------------------------------------------------
   Variabelen — overschreven vanuit de Customizer (functions.php)
---------------------------------------------------------------- */
:root {
	--iw-font: Verdana, Geneva, Tahoma, sans-serif;
	--iw-size: 11px;
	--iw-lh: 1.55;
	--iw-bg: #ffffff;
	--iw-text: #000000;
	--iw-muted: #8a8a8a;
	--iw-link: #0000ee;
	--iw-index-w: 215px;
	--iw-gap: 24px;
	--iw-pad: 24px;
	--iw-img-h: 78vh;
}

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

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

body {
	margin: 0;
	background: var(--iw-bg);
	color: var(--iw-text);
	font-family: var(--iw-font);
	font-size: var(--iw-size);
	line-height: var(--iw-lh);
}

a { color: var(--iw-link); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
a:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }

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

h1, h2, h3, h4, h5, h6 { font-size: 1em; font-weight: bold; margin: 0 0 1em; }
p, ul, ol, figure, blockquote { margin: 0 0 1em; }
hr { border: 0; border-top: 1px solid var(--iw-text); margin: 2em 0; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.skip-link:focus {
	clip: auto; width: auto; height: auto; z-index: 100;
	top: 8px; left: 8px; padding: 4px 8px; background: var(--iw-bg);
}

/* ---------------------------------------------------------------
   Index (linkerkolom)
---------------------------------------------------------------- */
.iw-index {
	position: fixed;
	top: 0; left: 0; bottom: 0;
	width: var(--iw-index-w);
	padding: var(--iw-pad);
	overflow-y: auto;
	scrollbar-width: none;
}
.iw-index::-webkit-scrollbar { display: none; }

.iw-site-title { font-weight: bold; margin: 0 0 .2em; }
.iw-site-title a { color: var(--iw-text); }
.iw-tagline { color: var(--iw-muted); margin: 0 0 2.5em; }

.iw-menu-toggle { display: none; }

.iw-nav ul { list-style: none; margin: 0; padding: 0; }
.iw-section { margin: 0 0 1.8em; }
.iw-section-title {
	display: block;
	font-weight: bold;
	color: var(--iw-text);
	margin: 0 0 .15em;
}
a.iw-section-title { color: var(--iw-text); }
.iw-nav li li a { color: var(--iw-link); }
.iw-nav .is-current > a,
.iw-nav .current-menu-item > a {
	color: var(--iw-text);
	text-decoration: none;
}
.iw-nav .is-current > a::before,
.iw-nav .current-menu-item > a::before { content: "\2192\00a0"; }

.iw-index-footer { color: var(--iw-muted); margin-top: 3em; }
.iw-index-footer p { margin: 0 0 .4em; }

/* ---------------------------------------------------------------
   Werkvlak (rechts)
---------------------------------------------------------------- */
.iw-main {
	margin-left: var(--iw-index-w);
	padding: var(--iw-pad) var(--iw-pad) calc(var(--iw-pad) * 3) 0;
	min-height: 100vh;
}

.iw-entry-header { margin-bottom: 2em; max-width: 34em; }
.iw-entry-title { margin: 0; }
.iw-entry-meta { color: var(--iw-muted); }

.iw-text, .entry-content > p, .entry-content > ul, .entry-content > ol,
.entry-content > h2, .entry-content > h3, .entry-content > blockquote {
	max-width: 34em;
}

.entry-content figure { margin: 0 0 var(--iw-gap); }
.entry-content figcaption,
.wp-element-caption {
	color: var(--iw-muted);
	margin-top: .5em;
	font-size: 1em;
	text-align: left;
}

/* Gutenberg: neutraliseer standaard galerijstijl */
.entry-content .wp-block-gallery { gap: var(--iw-gap) !important; }
.entry-content .wp-block-image img { height: auto; }

.iw-pagenav { margin-top: 4em; color: var(--iw-muted); }
.iw-pagenav a { margin-right: 1.5em; }

/* ---------------------------------------------------------------
   Layout 1: verticaal (standaard) — beelden onder elkaar
---------------------------------------------------------------- */
.layout-verticaal .entry-content img {
	width: auto;
	max-height: var(--iw-img-h);
}
.layout-verticaal .entry-content .wp-block-gallery {
	display: block;
}
.layout-verticaal .entry-content .wp-block-gallery > figure {
	width: auto !important;
	margin-bottom: var(--iw-gap);
}

/* ---------------------------------------------------------------
   Layout 2: horizontaal — één lange strook, scrollen naar rechts
   (de klassieke Indexhibit-"horizontal format")
---------------------------------------------------------------- */
.layout-horizontaal .iw-main { padding-right: 0; }
.layout-horizontaal .entry-content {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: var(--iw-gap);
	overflow-x: auto;
	overflow-y: hidden;
	padding-bottom: 1em;
	padding-right: var(--iw-pad);
	scroll-snap-type: x proximity;
}
.layout-horizontaal .entry-content > * {
	flex: 0 0 auto;
	margin: 0;
	scroll-snap-align: start;
}
.layout-horizontaal .entry-content > p,
.layout-horizontaal .entry-content > h2,
.layout-horizontaal .entry-content > h3,
.layout-horizontaal .entry-content > ul,
.layout-horizontaal .entry-content > blockquote {
	width: 20em;
	white-space: normal;
}
.layout-horizontaal .entry-content .wp-block-gallery {
	display: contents !important;
}
.layout-horizontaal .entry-content .wp-block-gallery > figure {
	flex: 0 0 auto;
	width: auto !important;
	margin: 0 !important;
}
.layout-horizontaal .entry-content img {
	height: var(--iw-img-h) !important;
	width: auto !important;
	max-width: none;
	object-fit: contain;
}
.layout-horizontaal .entry-content figcaption { max-width: 30em; }

/* ---------------------------------------------------------------
   Layout 3: raster — kleine beelden, klik = groot
---------------------------------------------------------------- */
.layout-raster .entry-content {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: var(--iw-gap);
	align-items: start;
}
.layout-raster .entry-content > p,
.layout-raster .entry-content > h2,
.layout-raster .entry-content > h3,
.layout-raster .entry-content > ul,
.layout-raster .entry-content > blockquote,
.layout-raster .entry-content > hr {
	grid-column: 1 / -1;
}
.layout-raster .entry-content figure { margin: 0; }
.layout-raster .entry-content .wp-block-gallery { display: contents !important; }
.layout-raster .entry-content .wp-block-gallery > figure { width: auto !important; margin: 0 !important; }
.layout-raster .entry-content img { width: 100%; cursor: zoom-in; }

/* ---------------------------------------------------------------
   Overzicht / homepage: raster van projecten
---------------------------------------------------------------- */
.iw-intro { max-width: 34em; margin-bottom: 3em; }

.iw-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: calc(var(--iw-gap) * 1.5) var(--iw-gap);
	list-style: none;
	margin: 0; padding: 0;
}
.iw-grid a { color: var(--iw-text); display: block; }
.iw-grid a:hover { text-decoration: none; }
.iw-grid a:hover .iw-grid-title { text-decoration: underline; color: var(--iw-link); }
.iw-grid-thumb {
	aspect-ratio: 1 / 1;
	background: color-mix(in srgb, var(--iw-text) 6%, var(--iw-bg));
	margin-bottom: .5em;
	overflow: hidden;
}
.iw-grid-thumb img { width: 100%; height: 100%; object-fit: cover; }
.iw-grid.is-natural .iw-grid-thumb { aspect-ratio: auto; background: none; }
.iw-grid.is-natural .iw-grid-thumb img { height: auto; object-fit: initial; }
.iw-grid-meta { color: var(--iw-muted); }

/* ---------------------------------------------------------------
   Lichtbak (alleen in raster)
---------------------------------------------------------------- */
.iw-lightbox {
	position: fixed; inset: 0; z-index: 999;
	background: var(--iw-bg);
	display: flex; align-items: center; justify-content: center;
	padding: var(--iw-pad) var(--iw-pad) calc(var(--iw-pad) * 3);
	cursor: zoom-out;
}
.iw-lightbox[hidden] { display: none; }
.iw-lightbox img { max-height: calc(100vh - var(--iw-pad) * 4.5); width: auto; max-width: 100%; }
.iw-lightbox-bar {
	position: absolute; left: var(--iw-pad); right: var(--iw-pad); bottom: var(--iw-pad);
	display: flex; justify-content: space-between; color: var(--iw-muted);
}
.iw-lightbox-bar button {
	font: inherit; color: var(--iw-link); background: none; border: 0; padding: 0; cursor: pointer;
}

/* ---------------------------------------------------------------
   Smal scherm: index bovenaan, inklapbaar
---------------------------------------------------------------- */
@media (max-width: 760px) {
	:root { --iw-pad: 16px; --iw-img-h: 60vh; }
	.iw-index {
		position: static;
		width: auto;
		overflow: visible;
		padding-bottom: 0;
	}
	.iw-tagline { margin-bottom: 1em; }
	.iw-menu-toggle {
		display: inline; font: inherit; background: none; border: 0; padding: 0;
		color: var(--iw-link); cursor: pointer; margin-bottom: 1.5em;
	}
	.iw-nav { display: none; }
	.iw-nav.is-open { display: block; }
	.iw-main { margin-left: 0; padding: var(--iw-pad); }
	.layout-horizontaal .iw-main { padding-right: 0; }
	.layout-verticaal .entry-content img { max-height: none; width: 100%; }
}

@media print {
	.iw-index { position: static; width: auto; }
	.iw-main { margin: 0; }
}