/*
 * Bouwrestjes — layouts layer
 * Header, footer, grids, archive layout.
 */

/* =====================================================
   Container
   ===================================================== */
.site-main {
	max-width: var(--br-container);
	margin: 0 auto;
	padding: var(--br-sp-5) var(--br-gutter);
	min-height: 60vh;
}
@media (min-width: 768px) { .site-main { padding: var(--br-sp-7) var(--br-gutter); } }

/* =====================================================
   Header — sticky, glass-ish, warm
   Full-bleed achtergrond; inner-wrapper cap op container.
   ===================================================== */
.site-header {
	position: sticky; top: 0; z-index: 40;
	background: rgba(250, 245, 238, 0.85);
	backdrop-filter: saturate(1.4) blur(12px);
	-webkit-backdrop-filter: saturate(1.4) blur(12px);
	border-bottom: 1px solid rgba(236, 225, 208, 0.8);
}
.site-header__inner {
	max-width: var(--br-container);
	margin: 0 auto;
	padding: var(--br-sp-3) var(--br-gutter);
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--br-sp-5);
}

.site-branding { display: inline-flex; align-items: center; min-width: 0; }
.site-branding .custom-logo-link { display: inline-flex; max-width: 100%; }
.site-branding .custom-logo { width: auto; max-height: 44px; }
.site-title {
	font-family: var(--br-font-display);
	font-weight: 800;
	font-size: var(--br-fs-xl);
	color: var(--br-ink);
	letter-spacing: -0.025em;
	text-decoration: none;
	display: inline-flex; align-items: center;
	padding: var(--br-sp-1) 0;
	white-space: nowrap;
}
.site-title:hover { color: var(--br-primary-700); text-decoration: none; }
.site-title::before {
	content: ""; display: inline-block;
	width: 12px; height: 12px; margin-right: 0.45rem;
	background: var(--br-primary);
	border-radius: 0;
	transform: rotate(-10deg);
	flex-shrink: 0;
}

.site-nav { min-width: 0; }
.site-nav__list {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: var(--br-sp-1);
	justify-content: flex-end;
	align-items: center;
}
.site-nav__list a {
	display: inline-flex; align-items: center;
	padding: var(--br-sp-2) var(--br-sp-3);
	font-size: var(--br-fs-sm); font-weight: 500;
	color: var(--br-ink-2);
	text-decoration: none;
	border-radius: var(--br-radius-sm);
	transition: background var(--br-t-fast) var(--br-ease-out), color var(--br-t-fast) var(--br-ease-out);
	white-space: nowrap;
}
.site-nav__list a:hover {
	color: var(--br-primary-700);
	background: var(--br-primary-50);
	text-decoration: none;
}
.site-nav__list .current-menu-item > a,
.site-nav__list .current_page_item > a {
	color: var(--br-primary-700);
	background: var(--br-primary-50);
}

/* Header actions (CTA + hamburger) */
.site-header__actions {
	display: flex; align-items: center; gap: var(--br-sp-2);
	justify-self: end;
}
.site-header__cta { display: inline-flex; }
.site-header__cta svg { flex-shrink: 0; }

/* Hamburger (mobile-only) */
[data-br-menu-toggle] {
	display: none;
	width: 42px; height: 42px;
	align-items: center; justify-content: center;
	color: var(--br-ink-1);
	border-radius: var(--br-radius-sm);
	border: 1px solid var(--br-border);
	background: var(--br-surface);
	transition: background var(--br-t-fast) var(--br-ease-out), border-color var(--br-t-fast) var(--br-ease-out);
}
[data-br-menu-toggle]:hover { background: var(--br-bg-2); border-color: var(--br-border-2); }

/* Mobiel + tablet (<960): hamburger + ingeklapt nav.
   De desktop-nav wordt pas getoond vanaf 960 zodat hij nooit wraps
   in de te-smalle middelste kolom. */
@media (max-width: 959px) {
	.site-header__inner { grid-template-columns: minmax(0, 1fr) auto; gap: var(--br-sp-3); }
	.site-title { font-size: clamp(1.25rem, 5.5vw, 1.6rem); }
	[data-br-menu-toggle] { display: inline-flex; }
	.site-header__cta span { display: none; }
	.site-header__cta {
		padding: 0; width: 42px; height: 42px;
		justify-content: center;
	}
	.site-nav {
		grid-column: 1 / -1;
		display: none;
		margin-top: var(--br-sp-3);
		padding-top: var(--br-sp-3);
		border-top: 1px solid var(--br-border);
	}
	.site-nav__list { flex-direction: column; gap: 2px; align-items: stretch; justify-content: stretch; }
	.site-nav__list a { padding: var(--br-sp-3) var(--br-sp-3); font-size: var(--br-fs-base); white-space: normal; }
	body.has-nav-open .site-nav { display: block; animation: br-nav-slide var(--br-t-base) var(--br-ease-out); }
}
@keyframes br-nav-slide { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* =====================================================
   Footer
   ===================================================== */
.site-footer {
	background: var(--br-ink);
	color: rgba(255,255,255,0.85);
	margin-top: var(--br-sp-9);
	padding: var(--br-sp-7) var(--br-gutter);
}
.site-footer__inner {
	max-width: var(--br-container);
	margin: 0 auto;
	display: grid; gap: var(--br-sp-5);
	grid-template-columns: 1fr;
}
@media (min-width: 768px) {
	.site-footer__inner { grid-template-columns: 1fr 2fr; gap: var(--br-sp-6); }
}
.site-footer__logo {
	font-family: var(--br-font-display);
	font-weight: 800; font-size: var(--br-fs-xl);
	color: #fff; letter-spacing: -0.02em;
	display: inline-block;
}
.site-footer__logo::before {
	content: ""; display: inline-block;
	width: 12px; height: 12px; margin-right: 0.4rem;
	background: var(--br-primary);
	border-radius: 0;
	transform: rotate(-10deg);
	vertical-align: -1px;
}
.site-footer__tagline { margin: var(--br-sp-2) 0 0; font-size: var(--br-fs-sm); color: rgba(255,255,255,0.65); max-width: 360px; line-height: 1.5; }

.site-footer__list {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: var(--br-sp-2);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) { .site-footer__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.site-footer__list a {
	color: rgba(255,255,255,0.75);
	font-size: var(--br-fs-sm);
	text-decoration: none;
	transition: color var(--br-t-fast) var(--br-ease-out);
}
.site-footer__list a:hover { color: #fff; }

.site-footer__copy {
	max-width: var(--br-container);
	margin: var(--br-sp-6) auto 0;
	padding-top: var(--br-sp-5);
	border-top: 1px solid rgba(255,255,255,0.1);
	font-size: var(--br-fs-xs);
	color: rgba(255,255,255,0.55);
	text-align: center;
}

/* =====================================================
   Listing grid
   ===================================================== */
.listing-grid {
	display: grid;
	gap: var(--br-sp-4);
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.listings-empty {
	padding: var(--br-sp-8) var(--br-sp-5);
	text-align: center;
	color: var(--br-ink-3);
	background: var(--br-surface);
	border: 1px dashed var(--br-border-2);
	border-radius: var(--br-radius-lg);
	font-size: var(--br-fs-md);
}

/* =====================================================
   Category grid
   ===================================================== */
.category-grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: var(--br-sp-3);
	grid-template-columns: 1fr;
}
@media (min-width: 640px) { .category-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .category-grid { grid-template-columns: repeat(5, 1fr); } }

.category-block {
	display: flex; align-items: center; gap: var(--br-sp-3);
	padding: var(--br-sp-4);
	background: var(--br-surface);
	border: 1px solid var(--br-border);
	border-radius: var(--br-radius-md);
	color: var(--br-ink);
	text-decoration: none;
	transition: transform var(--br-t-base) var(--br-ease-out),
	            box-shadow var(--br-t-base) var(--br-ease-out),
	            border-color var(--br-t-base) var(--br-ease-out);
	min-height: 80px;
}
.category-block:hover {
	transform: translateY(-3px);
	border-color: var(--br-primary-300);
	box-shadow: var(--br-shadow-md);
	text-decoration: none;
	color: var(--br-ink);
}
.category-block__icon {
	width: 44px; height: 44px;
	border-radius: var(--br-radius-md);
	background: var(--br-primary-50);
	color: var(--br-primary-700);
	flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	transition: background var(--br-t-base) var(--br-ease-out);
}
.category-block__icon svg { width: 22px; height: 22px; }
.category-block:hover .category-block__icon { background: var(--br-primary); color: #fff; }

.category-block__body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.category-block__name { font-weight: 700; font-size: var(--br-fs-sm); line-height: 1.3; color: var(--br-ink); }
.category-block__count { font-size: var(--br-fs-xs); color: var(--br-ink-3); }

.category-block--empty {
	background: var(--br-primary-50);
	border-style: dashed;
	border-color: var(--br-primary-300);
}
.category-block--empty:hover {
	border-color: var(--br-primary);
	box-shadow: var(--br-shadow-md);
}
.category-block--empty .category-block__icon {
	background: #fff;
	color: var(--br-primary);
}
.category-block--empty .category-block__name { color: var(--br-primary-700); }
.category-block__count--empty {
	font-size: var(--br-fs-xs);
	color: var(--br-primary-700);
	font-weight: 600;
}

/* =====================================================
   Archive layout
   ===================================================== */
.archive__wrap { max-width: var(--br-container); margin: 0 auto; }
.archive-header { margin-bottom: var(--br-sp-5); }
.archive-title { font-size: var(--br-fs-2xl); margin-bottom: var(--br-sp-2); letter-spacing: -0.02em; }
.archive-description { color: var(--br-ink-2); margin: 0; font-size: var(--br-fs-md); }
.archive-breadcrumb {
	font-size: var(--br-fs-sm); color: var(--br-ink-3);
	margin-bottom: var(--br-sp-3);
}
.archive-breadcrumb a { color: var(--br-ink-2); font-weight: 500; }
.archive-breadcrumb a:hover { color: var(--br-primary-700); }

.archive__layout { display: grid; gap: var(--br-sp-5); grid-template-columns: 1fr; }
@media (min-width: 960px) { .archive__layout { grid-template-columns: 280px 1fr; gap: var(--br-sp-6); } }
.archive__filters, .archive__results { min-width: 0; }

.filter-form {
	display: grid; gap: var(--br-sp-5);
	padding: var(--br-sp-5);
	background: var(--br-surface);
	border: 1px solid var(--br-border);
	border-radius: var(--br-radius-lg);
	box-shadow: var(--br-shadow-xs);
}
@media (min-width: 960px) {
	.filter-form {
		position: sticky;
		top: 88px;
	}
}
.filter-form__field { display: flex; flex-direction: column; gap: var(--br-sp-2); margin: 0; padding: 0; border: 0; }
.filter-form__field > legend,
.filter-form__field > label {
	font-weight: 600; font-size: var(--br-fs-sm);
	color: var(--br-ink); letter-spacing: -0.005em;
	padding: 0;
}
.filter-form__field input[type="search"],
.filter-form__field input[type="number"],
.filter-form__field input[type="text"],
.filter-form__field select {
	width: 100%; padding: 0.6rem 0.8rem;
	font-size: var(--br-fs-sm);
	border: 1.5px solid var(--br-border-2);
	border-radius: var(--br-radius-sm);
	background: #fff;
	min-height: 40px;
	transition: border-color var(--br-t-fast) var(--br-ease-out), box-shadow var(--br-t-fast) var(--br-ease-out);
}
.filter-form__field input:focus,
.filter-form__field select:focus { outline: none; border-color: var(--br-primary); box-shadow: var(--br-focus); }
.filter-form__row { display: grid; gap: var(--br-sp-2); grid-template-columns: 1fr 1fr; }
.filter-form__checkbox {
	display: flex; align-items: center; gap: var(--br-sp-2);
	font-size: var(--br-fs-sm); color: var(--br-ink-2); cursor: pointer;
	padding: 0.25rem 0;
}
.filter-form__checkbox input { margin: 0; accent-color: var(--br-primary); width: 16px; height: 16px; }

@media (max-width: 639px) {
	.filter-form__row { grid-template-columns: 1fr; }
}