/* LRPress front-end stijlen. Bewust neutraal gehouden zodat het
   thema (kleuren/typografie) de boventoon voert; pas gerust aan.
   De onderstaande CSS-variabelen worden overschreven via een kleine
   inline stylesheet op basis van LRPress > Instellingen > Vormgeving. */

:root {
	--lrpress-container-width: 1100px;
	--lrpress-heading-size: 1.3rem;
	--lrpress-card-title-size: 1.15rem;
	--lrpress-text-scale: 1;
}

.lrpress-container {
	max-width: var(--lrpress-container-width, 1100px);
	margin: 0 auto;
	padding: 2rem 1.25rem;
	font-family: inherit;
}

.lrpress-with-sidebar {
	display: grid;
	grid-template-columns: 1fr 280px;
	gap: 2.5rem;
	align-items: start;
}

@media (max-width: 782px) {
	.lrpress-with-sidebar {
		grid-template-columns: 1fr;
	}
}

/* Breadcrumbs */
.lrpress-breadcrumbs {
	font-size: 0.875rem;
	margin-bottom: 1.5rem;
	opacity: 0.75;
}
.lrpress-breadcrumbs a { text-decoration: none; }
.lrpress-breadcrumb-sep { margin: 0 0.5em; }

/* Zoekbalk */
.lrpress-search-form {
	display: flex;
	gap: 0.5rem;
	margin: 1.25rem 0;
	width: 100%;
	max-width: 100%;
}
.lrpress-search-input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.6em 0.8em;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-family: inherit;
	font-size: inherit;
}
.lrpress-search-button {
	flex: 0 0 auto;
	white-space: nowrap;
	cursor: pointer;
}
.lrpress-search-button:hover { opacity: 0.9; }

/* Kamers grid */
.lrpress-kamers-grid {
	display: grid;
	grid-template-columns: repeat(var(--lrpress-columns, 3), 1fr);
	gap: 1.25rem;
	margin-top: 1.5rem;
}
@media (max-width: 782px) {
	.lrpress-kamers-grid { grid-template-columns: 1fr; }
}
.lrpress-kamer-card {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 1.5rem;
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	text-decoration: none;
	color: inherit;
	position: relative;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.lrpress-lock-badge {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	font-size: 1.1rem;
	width: 1.1rem;
	height: 1.1rem;
	opacity: 0.7;
	background: #fff;
	border-radius: 50%;
	padding: 0.3rem;
	box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.lrpress-kamer-card.is-locked { opacity: 0.9; }
.lrpress-kamer-card:hover {
	box-shadow: 0 4px 14px rgba(0,0,0,0.08);
	transform: translateY(-2px);
}
.lrpress-kamer-icon { font-size: 1.75rem; width: 1.75rem; height: 1.75rem; }
.lrpress-kamer-title { font-size: var(--lrpress-card-title-size); font-weight: 600; font-family: inherit; }
.lrpress-kamer-description { font-size: calc(0.9rem * var(--lrpress-text-scale, 1)); opacity: 0.75; }
.lrpress-kamer-count { font-size: 0.8rem; opacity: 0.6; margin-top: auto; }

/* Sectie-blokken op de kamer-pagina */
.lrpress-sectie-block { margin-bottom: 2.25rem; }
.lrpress-sectie-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--lrpress-heading-size, 1.3rem) !important;
	font-family: inherit;
	font-weight: 700;
	line-height: 1.3;
}
.lrpress-sectie-count { opacity: 0.5; font-weight: 400; font-size: 0.9rem; color: inherit; }
.lrpress-view-all { display: inline-block; margin-top: 0.5rem; font-size: 0.9rem; }

/* Artikellijsten */
.lrpress-article-list { list-style: none; margin: 0.75rem 0 0; padding: 0; font-size: calc(1rem * var(--lrpress-text-scale, 1)); }
.lrpress-article-list li { padding: 0.4rem 0; border-bottom: 1px dashed #e5e5e5; }
.lrpress-article-list li:last-child { border-bottom: none; }
.lrpress-article-list a { text-decoration: none; }

.lrpress-article-list-large .lrpress-article-list-item { padding: 1rem 0; }
.lrpress-article-list-link { display: block; }
.lrpress-article-list-title { display: block; font-size: calc(1.1rem * var(--lrpress-text-scale, 1)); font-weight: 600; }
.lrpress-article-list-excerpt { display: block; font-size: calc(0.9rem * var(--lrpress-text-scale, 1)); opacity: 0.75; margin-top: 0.25rem; }

/* Artikel */
.lrpress-article-header { margin-bottom: 1.25rem; }
.lrpress-article-title { font-size: 2rem; margin-bottom: 0.4rem; }
.lrpress-article-meta { font-size: 0.85rem; opacity: 0.65; display: flex; gap: 1rem; }
.lrpress-article-thumbnail img { border-radius: 8px; margin-bottom: 1.5rem; width: 100%; height: auto; }
.lrpress-article-content { line-height: 1.7; font-size: calc(1rem * var(--lrpress-text-scale, 1)); }
.lrpress-kamer-intro,
.lrpress-sectie-intro { font-size: calc(1rem * var(--lrpress-text-scale, 1)); opacity: 0.85; }

/* LearnPress-callout */
.lrpress-course-callout {
	display: flex;
	gap: 0.9rem;
	align-items: flex-start;
	margin: 2rem 0;
	padding: 1.1rem 1.3rem;
	background: #f2f8f5;
	border-left: 4px solid currentColor;
	border-radius: 4px;
}
.lrpress-course-callout-icon { font-size: 1.5rem; }
.lrpress-course-callout-link { font-weight: 600; }

/* Gerelateerde artikelen */
.lrpress-related-articles { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid #e5e5e5; }
.lrpress-related-list { list-style: none; padding: 0; display: grid; gap: 0.5rem; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 600px) { .lrpress-related-list { grid-template-columns: 1fr; } }

/* Zijbalk */
.lrpress-sidebar-block { margin-bottom: 2rem; }
.lrpress-sidebar-block h3 {
	font-size: calc(var(--lrpress-heading-size, 1.3rem) * 0.8) !important;
	font-family: inherit;
	font-weight: 600;
	line-height: 1.3;
	margin: 0 0 0.6rem;
}
.lrpress-sidebar-nav { list-style: none; padding: 0; margin: 0.5rem 0 0; }
.lrpress-sidebar-nav li { padding: 0.3rem 0; font-size: calc(0.9rem * var(--lrpress-text-scale, 1)); }
.lrpress-sidebar-nav li.is-current a { font-weight: 700; }
.lrpress-sidebar-nav a { text-decoration: none; }

.lrpress-popular-list { list-style: none; padding: 0; margin: 0.5rem 0 0; }
.lrpress-popular-list li { padding: 0.3rem 0; display: flex; flex-direction: column; font-size: calc(0.9rem * var(--lrpress-text-scale, 1)); }
.lrpress-popular-views { font-size: 0.75rem; opacity: 0.55; }

/* Pagination */
.lrpress-pagination { margin-top: 2rem; display: flex; gap: 0.4rem; }
.lrpress-pagination .page-numbers {
	padding: 0.4em 0.75em;
	border: 1px solid #ddd;
	border-radius: 4px;
	text-decoration: none;
}
.lrpress-pagination .page-numbers.current { font-weight: 700; text-decoration: underline; border-color: currentColor; }

/* Categorieën & tags onder een artikel */
.lrpress-article-taxonomies {
	margin-top: 2.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid #e5e5e5;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.lrpress-taxonomy-label {
	font-size: 0.8rem;
	font-weight: 600;
	opacity: 0.6;
	margin-right: 0.5rem;
}
.lrpress-categorie-pill,
.lrpress-tag-pill {
	display: inline-block;
	font-size: 0.8rem;
	padding: 0.25em 0.7em;
	border-radius: 999px;
	text-decoration: none;
	margin: 0.15em 0.25em 0.15em 0;
}
.lrpress-categorie-pill { background: #eef4f1; color: inherit; }
.lrpress-tag-pill { background: #f2f2f2; color: #555; }

/* Zijbalk-positie (links/rechts, instelbaar via LRPress-instellingen) */
.lrpress-with-sidebar.lrpress-sidebar-left {
	grid-template-columns: 280px 1fr;
}
.lrpress-with-sidebar.lrpress-sidebar-left > .lrpress-sidebar {
	order: -1;
}

/* Huis-/Kamer-afbeeldingen */
.lrpress-kamer-card-image,
.lrpress-sectie-image {
	width: 100%;
	height: auto;
	border-radius: 6px;
	margin-bottom: 0.5rem;
	object-fit: cover;
}
.lrpress-kamer-card-image { max-height: 140px; }
.lrpress-sectie-image { max-height: 180px; }
.lrpress-huis-header-image {
	width: 100%;
	max-height: 260px;
	object-fit: cover;
	border-radius: 8px;
	margin-bottom: 1.25rem;
}

/* Ingebed artikel (shortcode/block [lrpress_artikel]) */
.lrpress-artikel-embed {
	display: flex;
	gap: 1.25rem;
	padding: 1.25rem;
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	margin: 1.5rem 0;
}
@media (max-width: 500px) {
	.lrpress-artikel-embed { flex-direction: column; }
}
.lrpress-artikel-embed-image { flex: 0 0 160px; }
.lrpress-artikel-embed-image img { width: 160px; height: 110px; object-fit: cover; border-radius: 6px; display: block; }
.lrpress-artikel-embed-body { flex: 1; }
.lrpress-artikel-embed-title { margin: 0 0 0.35rem; font-size: var(--lrpress-card-title-size); font-family: inherit; }
.lrpress-artikel-embed-meta { display: inline-block; font-size: 0.75rem; opacity: 0.6; margin-bottom: 0.4rem; }
.lrpress-artikel-embed-excerpt { font-size: calc(0.9rem * var(--lrpress-text-scale, 1)); opacity: 0.8; margin: 0 0 0.5rem; }

/* Ingebedde Kamer (shortcode/block [lrpress_kamer]) */
.lrpress-kamer-detail { margin: 1.5rem 0; }

/* Block-editor: zoek-/kiesresultaten in de Placeholder-picker */
.lrpress-block-results {
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
	max-height: 220px;
	overflow-y: auto;
	width: 100%;
	text-align: left;
	border: 1px solid #e2e2e2;
	border-radius: 4px;
}
.lrpress-block-results li {
	padding: 0.4rem 0.75rem;
	border-bottom: 1px solid #f0f0f0;
}
.lrpress-block-results li:last-child { border-bottom: none; }

/* Huis-paginatitel: bewust GEEN eigen grootte/kleur, dit is een
   normale <h1> die de stijl van je thema volgt (zoals "Bijbelleerhuis"
   in het BasePress-voorbeeld). */
.lrpress-huis-title { margin: 1rem 0 0.5rem; }

/* Kamer-overzicht op de Huis-pagina: naast elkaar in kolommen,
   zoals in het BasePress-voorbeeld, i.p.v. onder elkaar. */
.lrpress-kamers-overzicht {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0 2.5rem;
	margin-top: 1.5rem;
}
@media (max-width: 700px) {
	.lrpress-kamers-overzicht { grid-template-columns: 1fr; }
}

/* Uitklapbaar kennisbank-boomstructuurmenu (Huizen > Kamers) */
.lrpress-tree { font-size: calc(0.95rem * var(--lrpress-text-scale, 1)); }
.lrpress-tree-list,
.lrpress-tree-sublist {
	list-style: none;
	margin: 0;
	padding: 0;
}
.lrpress-tree-sublist { padding-left: 1.5rem; }
.lrpress-tree-item { border-bottom: 1px solid #eee; }
.lrpress-tree-item:last-child { border-bottom: none; }

.lrpress-tree-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 0;
	text-decoration: none;
	color: inherit;
}
.lrpress-tree-row-leaf:hover { text-decoration: underline; }
.lrpress-tree-row.is-current,
.lrpress-tree-label.is-current { font-weight: 700; }

.lrpress-tree-icon { font-size: 1.1rem; width: 1.1rem; height: 1.1rem; flex-shrink: 0; opacity: 0.75; }
.lrpress-tree-label { flex: 1; text-decoration: none; color: inherit; }
.lrpress-tree-label:hover { text-decoration: underline; }

.lrpress-tree-chevron {
	font-size: 1rem;
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
	opacity: 0.5;
	transition: transform 0.15s ease;
}
.lrpress-tree-details[open] > summary .lrpress-tree-chevron { transform: rotate(90deg); }

/* Derde niveau: artikelen onder een Kamer */
.lrpress-tree-sublist-articles { padding-left: 1.5rem; }
.lrpress-tree-sublist-articles .lrpress-tree-icon { font-size: 0.95rem; width: 0.95rem; height: 0.95rem; opacity: 0.5; }
.lrpress-tree-row-more { font-style: italic; opacity: 0.7; }

/* Verberg de standaard driehoek-marker van <summary>, wij tekenen
   zelf een chevron rechts (zoals in het BasePress-voorbeeld). */
.lrpress-tree-details > summary { list-style: none; cursor: pointer; }
.lrpress-tree-details > summary::-webkit-details-marker { display: none; }
.lrpress-tree-details > summary::marker { content: ""; }

/* --------------------------------------------------------------------
   Fix: op sommige sites (bijv. i.c.m. LearnPress/Course Builder) wordt
   de centrering van de thema-navigatie in de header specifiek op
   archiefachtige pagina's (zoals onze Huis-/Kamer-overzichten)
   overschreven door CSS van een andere plugin. Onze header.php voegt
   de class "site-header" toe aan het <header>-element (de originele,
   door WordPress zelf gerenderde header op normale pagina's heeft die
   class niet) \u2014 dat gebruiken we hier als een veilig, specifiek
   aanknopingspunt om de oorspronkelijke centrering af te dwingen,
   ongeacht welke andere plugin-CSS ertussen zit.
   -------------------------------------------------------------------- */
header.site-header .is-content-justification-center {
	display: flex !important;
	justify-content: center !important;
}
header.site-header .is-content-justification-right {
	display: flex !important;
	justify-content: flex-end !important;
}
header.site-header .is-content-justification-left {
	display: flex !important;
	justify-content: flex-start !important;
}
header.site-header .is-content-justification-space-between {
	display: flex !important;
	justify-content: space-between !important;
}