/*
Theme Name: Patiëntenzorg AVL (Hello Elementor Child)
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Child theme of Hello Elementor for Stichting Patiëntenzorg AVL. Replaces the custom mxdfr-base theme; layout lives in Elementor, this theme only carries site logic and the styles Elementor cannot express.
Author: Elementor Team / solutions.io
Author URI: https://solutions.io
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

/*
 * Colours and sizes come from Elementor's global variables
 * (Site Settings → Variables: --pz-yellow, --pz-green, …). The fallbacks
 * below only apply if a variable is ever removed.
 *
 * What lives where:
 *   - Elementor global classes (pz-container, pz-subhead, pz-list, …):
 *     styling of Elementor elements – edit those in the editor.
 *   - This file: things Elementor cannot target – the page base, markup
 *     *inside* text elements (lists, links), the classic-editor content of
 *     the project posts and the Contact Form 7 form.
 */

/* ---------------------------------------------------------------------------
 * Base
 * ------------------------------------------------------------------------ */

html,
body {
	max-width: 100%;
	overflow-x: hidden;
}

body {
	font-family: Rubik, sans-serif;
	color: var(--pz-text, #000);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Project posts: grey page behind the white article card. */
body.single-toekenning,
body.single-specialepojecten {
	background-color: var(--pz-bg-grey, #ededee);
}

/* ---------------------------------------------------------------------------
 * Links inside text elements
 * ------------------------------------------------------------------------ */

.e-paragraph-base a,
.pz-post-body a {
	color: var(--pz-link, #1a3fc4);
	text-decoration: underline;
}

.e-paragraph-base a:hover,
.pz-post-body a:hover {
	color: var(--pz-green, #008000);
}

/* ---------------------------------------------------------------------------
 * Lists inside text elements
 *   pz-list         plain lists with spacing
 *   pz-list-narcis  narcis bullet (old .custom-ul)
 * ------------------------------------------------------------------------ */

.pz-list ul,
.pz-list ol,
.pz-list-narcis ul {
	margin: 10px 0;
	padding-left: 20px;
}

.pz-list li {
	margin-bottom: 4px;
}

.pz-list-narcis ul {
	list-style: none;
	padding-left: 0;
}

.pz-list-narcis ul li {
	background: url("../../uploads/2017/10/narcis-flat.png") no-repeat left center;
	background-size: 15px;
	padding-left: 22px;
	margin-bottom: 4px;
}

/* Numbered lists whose numbers are written in the text (class "pz-ol-manual"). */
.pz-ol-manual ol {
	list-style: none;
	padding-left: 0;
}

/* ---------------------------------------------------------------------------
 * Project posts (Toekenningen / Speciale projecten) – classic-editor content
 * in the single templates, wrapper class "pz-post-body".
 * ------------------------------------------------------------------------ */

.pz-post-body,
.pz-post-body .elementor-widget-theme-post-content {
	font-size: 15px;
	line-height: 1.5;
	color: var(--pz-text, #000);
}

.pz-post-body::after {
	content: "";
	display: block;
	clear: both;
}

.pz-post-body :is(h1, h2, h3, h4) {
	color: var(--pz-green, #008000);
	line-height: 1.25;
	margin: 1.2em 0 0.4em;
}

.pz-post-body img {
	max-width: 100%;
	height: auto;
	border-radius: 7px;
}

.pz-post-body .alignleft {
	float: left;
	margin: 0 20px 15px 0;
}

.pz-post-body .alignright {
	float: right;
	margin: 0 0 15px 20px;
}

.pz-post-body .aligncenter {
	display: block;
	margin: 0 auto 15px;
}

/* Side-by-side images (converted from WPBakery columns). */
.pz-post-body .pz-images {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-bottom: 20px;
}

.pz-post-body .pz-images img {
	flex: 1 1 260px;
	max-width: calc(50% - 10px);
	object-fit: cover;
}

@media (max-width: 767px) {
	.pz-post-body .alignleft,
	.pz-post-body .alignright {
		float: none;
		display: block;
		margin: 0 0 15px;
	}

	.pz-post-body .pz-images img {
		max-width: 100%;
	}
}

/* ---------------------------------------------------------------------------
 * Donation request form (Contact Form 7 + multiline files) – wrapper class
 * "pz-form" on the Elementor element that holds the shortcode.
 * ------------------------------------------------------------------------ */

.pz-form .wpcf7 label {
	display: block;
	margin-bottom: 18px;
	font-size: 14px;
}

.pz-form input.wpcf7-text,
.pz-form input.wpcf7-email,
.pz-form textarea.wpcf7-textarea {
	box-sizing: border-box;
	width: 100%;
	margin-top: 7px;
	padding: 10px 20px;
	border: none;
	border-radius: 20px;
	background-color: #f7f7f9;
	font-family: inherit;
}

.pz-form input.wpcf7-text:focus,
.pz-form input.wpcf7-email:focus,
.pz-form textarea.wpcf7-textarea:focus {
	outline: 2px solid var(--pz-yellow, #fce94d);
}

.pz-form input[type="submit"] {
	width: 100%;
	margin-top: 30px;
	padding: 10px;
	border: none;
	border-radius: 6px;
	font-size: 15px;
	color: #000;
	cursor: pointer;
	background-image: linear-gradient(to right, #fce94d, #ededee, #ffda38);
	background-size: 200% 100%;
	transition: background-position 0.7s ease;
}

.pz-form input[type="submit"]:hover,
.pz-form input[type="submit"]:focus {
	color: #000;
	background-color: transparent;
	background-position: 100% 0;
}

/* "+ voeg bestand toe" (multiline files) – override Hello's pink button. */
.pz-form input#mfcf7_zl_add_file {
	padding: 10px 16px;
	border: none;
	border-radius: 30px;
	color: #000;
	background-color: var(--pz-yellow-light, #fff49d);
	cursor: pointer;
}

.pz-form input#mfcf7_zl_add_file:hover,
.pz-form input#mfcf7_zl_add_file:focus {
	color: #000;
	background-color: var(--pz-yellow, #fce94d);
}

.pz-form #mfcf7_zl_multifilecontainer p.wpcf7-form-control-wrap {
	margin-bottom: 10px;
}

/* "?" help toggles (see assets/js/site.js). */
.pz-form span.toggle-i {
	float: right;
	width: 18px;
	height: 18px;
	line-height: 19px;
	border-radius: 50%;
	background-color: #ccc;
	color: #fff;
	font-size: 12px;
	text-align: center;
	cursor: pointer;
}

.pz-form span.uitleg {
	display: none;
	margin: 10px 0;
	padding: 10px;
	border: 2px solid #ededee;
	border-radius: 10px;
}

.pz-form span.uitleg.is-open {
	display: block;
}