/*
Theme Name: Avada Child
Description: Child theme for Avada theme
Author: ThemeFusion
Author URI: https://theme-fusion.com
Template: Avada
Version: 1.0.0
Text Domain:  Avada
/* Post Cards filter menu: center + button style */
.fusion-filters {
	justify-content: center !important;
	border-top: none !important;
	border-bottom: none !important;
	flex-wrap: wrap;
	gap: 10px;
}
.fusion-filters .fusion-filter {
	margin: 0 !important;
}
.fusion-filters .fusion-filter > a {
	display: inline-block;
	padding: 8px 22px;
	border: 1px solid #dcdcdc;
	border-radius: 30px;
	background-color: #f5f5f5 !important;
	color: #333 !important;
	transition: all 0.2s ease;
}
.fusion-filters .fusion-filter > a:hover,
.fusion-filters .fusion-filter.fusion-active > a {
	background-color: #2b6cb0 !important;
	color: #e5e5e5 !important;
	border-color: #2b6cb0 !important;
}
/* Read More / collapse button (e.g. "Lees het volledige verhaal"): exact
   match to the filter pill's own two states (default gray, blue on
   hover), including resetting the Avada button classes' own font-size/
   line-height so the text renders identically to the plain filter link. */
.awb-collapse-trigger {
	display: inline-block;
	font: inherit !important;
	letter-spacing: inherit !important;
	text-transform: inherit !important;
	padding: 8px 22px !important;
	border: 1px solid #dcdcdc !important;
	border-radius: 30px !important;
	background-color: #f5f5f5 !important;
	color: rgb(68, 68, 68) !important;
	transition: all 0.2s ease;
}
.awb-collapse-trigger:hover {
	background-color: #2b6cb0 !important;
	color: rgb(229, 229, 229) !important;
	border-color: #2b6cb0 !important;
}
/* Avada sets the actual text color on the inner .fusion-button-text span
   (not the button itself), at higher specificity than the rules above -
   so it has to be targeted directly here too. */
.awb-collapse-trigger .fusion-button-text {
	color: rgb(68, 68, 68) !important;
}
.awb-collapse-trigger:hover .fusion-button-text {
	color: rgb(229, 229, 229) !important;
}
/* Extra breathing room below the collapse/read-more button, before whatever
   section follows it on the page. */
.awb-collapse-trigger-wrapper {
	margin-bottom: 30px;
}
/* Wiki Like Links plugin: inline reference popup. Zero gap between the
   trigger and the popup box (bottom:100%, no margin) so moving the mouse
   from the [N] link straight up into the popup never crosses empty space -
   that gap is what was causing it to disappear before it could be reached.
   The second selector (.ref-popup:hover) keeps it open once the mouse is
   over the popup itself, so the source link inside stays clickable. */
.ref {
	position: relative;
	white-space: nowrap;
}
.ref-link {
	cursor: pointer;
	color: var(--link_color);
	text-decoration-line: underline;
	text-decoration-style: dotted;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}
.ref-popup {
	display: none;
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	min-width: 220px;
	max-width: 300px;
	background: #fff;
	color: #333;
	border: 1px solid #dcdcdc;
	border-radius: 6px;
	box-shadow: 0 4px 14px rgba(0,0,0,0.18);
	padding: 12px 14px;
	font-size: 13px;
	line-height: 1.5;
	white-space: normal;
	text-align: left;
	z-index: 9999;
}
.ref-popup.is-open {
	display: block;
}
/* Wikipedia-mobile-style: on narrow screens the popup becomes a fixed
   bottom sheet instead of a floating box above the [N] link - easier to
   reach and read on a phone, and consistent regardless of where the
   citation sits on the page. */
@media (max-width: 780px) {
	.ref-popup {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: auto;
		transform: none;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		border-radius: 12px 12px 0 0;
		box-shadow: 0 -6px 20px rgba(0,0,0,0.25);
		max-height: 40vh;
		overflow-y: auto;
		z-index: 99999;
	}
}
/* Wiki Like Links: Wikipedia-style "Bronnen, noten en/of referenties"
   section built by wll:show - small numbered list with a "^" link on each
   item that jumps back up to the matching [N] citation in the text. */
.wll-references {
	margin-top: 40px;
	padding-top: 20px;
	border-top: 1px solid #dcdcdc;
}
.wll-references h2 {
	font-size: 20px;
	margin-bottom: 14px;
}
.wll-references ol {
	font-size: 14px;
	line-height: 1.6;
	color: #444;
	padding-left: 26px;
}
.wll-references li {
	margin-bottom: 6px;
}
.wll-references .wll-backlink {
	color: var(--link_color);
	text-decoration: none;
	margin-right: 4px;
}
.wll-references a {
	color: var(--link_color);
	text-decoration-line: underline;
	text-decoration-style: dotted;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}


/* Rijksmonument badge: shown on every "Zien & Doen" post card for now (test),
   modeled after the official rijksmonument plaquette. A real toggle
   (per-post field/category) can replace the blanket ".post-card" selector later. */
.post-card.is-rijksmonument .fusion-imageframe {
	position: relative;
}
.post-card.is-rijksmonument .fusion-imageframe::after {
	content: "Rijksmonument";
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 5;
	padding: 5px 14px 5px 5px;
	background: #f4f1ea;
	color: #1c3159;
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
	font-weight: 700;
	font-size: 11px;
	line-height: 1.15;
	text-align: left;
	white-space: nowrap;
	border-radius: 3px;
	box-shadow: 0 3px 8px rgba(0,0,0,.35);
	pointer-events: none;
}
.post-card.is-rijksmonument .fusion-imageframe::before {
	content: "";
	position: absolute;
	top: 14px;
	right: 12px;
	z-index: 6;
	width: 16.6px;
	height: 16.6px;
	background: #ff6a13;
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
	border-radius: 0 2px 0 0;
	pointer-events: none;
}

/* Post Cards filter pills on mobile: Avada's own responsive CSS
   (fusion-builder's generated dynamic stylesheet, loaded AFTER this file)
   forces ".fusion-post-cards .fusion-filters{display:block!important}" plus
   a per-item border-bottom below 800px, turning the pill row into a
   stacked list with divider lines. Same selector + !important there means
   it wins on source order alone, so we bump specificity (repeat the class)
   rather than relying on load order, and re-apply the same wrapped/
   centered pill layout used on desktop. */
@media only screen and (max-width: 800px) {
	.fusion-post-cards .fusion-filters.fusion-filters {
		display: flex !important;
		flex-wrap: wrap !important;
		justify-content: center !important;
		gap: 8px !important;
	}
	.fusion-filters .fusion-filter.fusion-filter {
		float: none !important;
		margin: 0 !important;
		border-bottom: none !important;
	}
	.fusion-filters .fusion-filter.fusion-filter > a {
		padding: 7px 16px !important;
		font-size: 13px !important;
	}
}