/*
Theme Name: Hutmacher
Description: Thème minimal pour Carol Hutmacher Architektur GmbH.
Author: Grégory Béguelin
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: hutmacher
*/

:root {
	--c-text: #111;
	--c-muted: #777;
	--c-line: #ddd;
	--c-bg: #fff;
	--font: "Helvetica Neue", Helvetica, Arial, sans-serif;
	--fs: 15px;
	--lh: 1.5;
	--pad: clamp(20px, 4vw, 48px);
	--max: 1200px;
	--text-max: 680px;
}

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

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

body {
	margin: 0;
	font-family: var(--font);
	font-size: var(--fs);
	line-height: var(--lh);
	color: var(--c-text);
	background: var(--c-bg);
	-webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}

/* ---------- Layout ---------- */

.wrap {
	max-width: var(--max);
	margin: 0 auto;
	padding: 0 var(--pad);
}

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

.site-header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px 32px;
	padding-top: var(--pad);
	padding-bottom: calc(var(--pad) * 1.5);
}

.site-title {
	margin: 0;
	font-size: inherit;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.main-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 24px;
}

.main-nav .current-menu-item > a,
.main-nav .current_page_item > a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- Contenu ---------- */

.page-hero { margin: 0 0 calc(var(--pad) * 1.2); }
.page-hero img { width: 100%; }

.caption,
figcaption,
.wp-element-caption {
	margin-top: 8px;
	font-size: 13px;
	color: var(--c-muted);
}

.entry {
	max-width: var(--text-max);
	padding-bottom: calc(var(--pad) * 2);
}

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

.entry h1, .entry h2, .entry h3 {
	font-size: inherit;
	font-weight: 700;
	margin: 2em 0 .5em;
}

.entry p { margin: 0 0 1em; }

.entry ul { padding-left: 1.1em; }

.entry figure { margin: 0 0 1.5em; }

/* ---------- Werkliste ----------
   Dans l'éditeur : bloc « Groupe » avec la classe CSS « werkliste »,
   contenant pour chaque année un Titre H2 (l'année) + une Liste. */

.werkliste h2 {
	margin: 2em 0 .4em;
	padding-top: .4em;
	border-top: 1px solid var(--c-line);
}

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

.werkliste li { margin: 0 0 .3em; }

/* Variante tableau (bloc « Tableau » avec la classe « werkliste ») */
.entry table {
	width: 100%;
	border-collapse: collapse;
}
.entry td, .entry th {
	text-align: left;
	vertical-align: top;
	padding: 6px 16px 6px 0;
	border-top: 1px solid var(--c-line);
}
.entry td:first-child { white-space: nowrap; width: 5em; }
.wp-block-table { margin: 0 0 1em; }
.wp-block-table td, .wp-block-table th { border-left: 0; border-right: 0; border-bottom: 0; }

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

.site-footer {
	padding-top: var(--pad);
	padding-bottom: var(--pad);
	font-size: 13px;
	color: var(--c-muted);
	display: flex;
	justify-content: space-between;
	gap: 16px;
}

.to-top:hover { color: var(--c-text); }

/* ---------- Mobile ---------- */

@media (max-width: 600px) {
	.site-header { flex-direction: column; }
	.main-nav ul { gap: 18px; }
}