/* jasol.be: block pages and footer (replaces Elementor). Loaded on the site and in the editor by mu-plugins/jasol-site.php. */

/* Font Awesome Free 5 icons (CC BY 4.0), used as CSS masks. */
:root {
	--js-i-calendar-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M436 160H12c-6.627 0-12-5.373-12-12v-36c0-26.51 21.49-48 48-48h48V12c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v52h128V12c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v52h48c26.51 0 48 21.49 48 48v36c0 6.627-5.373 12-12 12zM12 192h424c6.627 0 12 5.373 12 12v260c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V204c0-6.627 5.373-12 12-12zm333.296 95.947l-28.169-28.398c-4.667-4.705-12.265-4.736-16.97-.068L194.12 364.665l-45.98-46.352c-4.667-4.705-12.266-4.736-16.971-.068l-28.397 28.17c-4.705 4.667-4.736 12.265-.068 16.97l82.601 83.269c4.667 4.705 12.265 4.736 16.97.068l142.953-141.805c4.705-4.667 4.736-12.265.068-16.97z'/%3E%3C/svg%3E");
	--js-i-envelope: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z'/%3E%3C/svg%3E");
	--js-i-cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M537.6 226.6c4.1-10.7 6.4-22.4 6.4-34.6 0-53-43-96-96-96-19.7 0-38.1 6-53.3 16.2C367 64.2 315.3 32 256 32c-88.4 0-160 71.6-160 160 0 2.7.1 5.4.2 8.1C40.2 219.8 0 273.2 0 336c0 79.5 64.5 144 144 144h368c70.7 0 128-57.3 128-128 0-61.9-44-113.6-102.4-125.4z'/%3E%3C/svg%3E");
	--js-i-server: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M480 160H32c-17.673 0-32-14.327-32-32V64c0-17.673 14.327-32 32-32h448c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32zm-48-88c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm112 248H32c-17.673 0-32-14.327-32-32v-64c0-17.673 14.327-32 32-32h448c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32zm-48-88c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm112 248H32c-17.673 0-32-14.327-32-32v-64c0-17.673 14.327-32 32-32h448c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32zm-48-88c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24z'/%3E%3C/svg%3E");
	--js-i-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z'/%3E%3C/svg%3E");
	--js-i-map-marker-alt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z'/%3E%3C/svg%3E");
	--js-i-mobile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M272 0H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h224c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zM160 480c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z'/%3E%3C/svg%3E");
	--js-i-percent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M112 224c61.9 0 112-50.1 112-112S173.9 0 112 0 0 50.1 0 112s50.1 112 112 112zm0-160c26.5 0 48 21.5 48 48s-21.5 48-48 48-48-21.5-48-48 21.5-48 48-48zm224 224c-61.9 0-112 50.1-112 112s50.1 112 112 112 112-50.1 112-112-50.1-112-112-112zm0 160c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zM392.3.2l31.6-.1c19.4-.1 30.9 21.8 19.7 37.8L77.4 501.6a23.95 23.95 0 0 1-19.6 10.2l-33.4.1c-19.5 0-30.9-21.9-19.7-37.8l368-463.7C377.2 4 384.5.2 392.3.2z'/%3E%3C/svg%3E");
	--js-i-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E");
	--js-i-long-arrow-alt-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M313.941 216H12c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h301.941v46.059c0 21.382 25.851 32.09 40.971 16.971l86.059-86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971V216z'/%3E%3C/svg%3E");
	--js-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3E%3C/svg%3E");}

:root { --js-blue: #4064d7; --js-navy: #1E295A; --js-grey: #F4F4F7; --js-ink: #3a3a3a; }

/* Sections */
.js-section { padding: 70px 20px; margin: 0 !important; }
.js-section.js-grey { background: var(--js-grey); }
.js-section.js-tight { padding-bottom: 20px; }
/* Astra is a classic theme, so WordPress wraps group content in .wp-block-group__inner-container. */
.js-section > *, .js-page > *, .js-hero > * { max-width: 1100px; margin-left: auto !important; margin-right: auto !important; }
/* In the block editor there is no inner container and every block has its own max-width. */
.editor-styles-wrapper :is(.js-section, .js-page, .js-hero) > .wp-block { max-width: 1100px !important; margin-left: auto !important; margin-right: auto !important; }
.editor-styles-wrapper .js-hero > .wp-block { width: 100%; }
.editor-styles-wrapper .js-section > .wp-block.js-narrow { max-width: 800px !important; }
.js-narrow { max-width: 800px; margin-left: auto !important; margin-right: auto !important; }
.js-intro p { max-width: 640px; margin-left: auto; margin-right: auto; }
.js-center { text-align: center; }
.js-section h2.js-center, .js-section h3.js-center { margin-bottom: 0; }

/* Short blue line under a heading */
hr.wp-block-separator.js-divider { width: 80px; height: 0; border: 0; border-top: 2px solid var(--js-blue); background: none; opacity: 1; margin: 14px auto 32px !important; }
hr.wp-block-separator.js-divider.js-left { margin-left: 0 !important; }

/* Home: hero */
.js-hero { min-height: 410px; display: flex; flex-direction: column; justify-content: center; padding: 60px 20px; margin: 0 !important; background: #fff url(/wp-content/uploads/2020/08/Banner-Hue.jpg) no-repeat right center / 80% auto; }
.js-hero > * { width: 100%; }
.js-hero h1 { font-size: clamp(40px, 6vw, 60px); font-weight: 700; color: #000; margin-bottom: 10px; }
.js-hero p { font-size: 15px; margin-bottom: 30px; }
@media (max-width: 767px) {
	.js-hero { background-image: none !important; text-align: center; min-height: 0; }
	.js-hero .wp-block-buttons { justify-content: center; }
}

/* Home: service cards with an icon */
.js-cards { gap: 20px; }
.js-card { background: #fff; box-shadow: 0 4px 18px rgba(0, 0, 0, .08); padding: 30px 30px 26px; text-align: center; position: relative; margin: 0 0 20px !important; transition: box-shadow .2s; }
.js-card:hover { box-shadow: 0 6px 26px rgba(0, 0, 0, .14); }
.js-card h4 { font-size: 20px; margin: 0 0 15px; }
.js-card h4 a { color: #000; text-decoration: none; }
.js-card h4 a::after { content: ""; position: absolute; inset: 0; }
.js-card h4::before { content: ""; display: block; width: 38px; height: 38px; margin: 0 auto 10px; background: var(--js-navy); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.js-card p { font-size: 14px; margin: 0; }
.js-i-calendar-check { --icon: var(--js-i-calendar-check); }
.js-i-envelope { --icon: var(--js-i-envelope); }
.js-i-cloud { --icon: var(--js-i-cloud); }
.js-i-server { --icon: var(--js-i-server); }
.js-i-lock { --icon: var(--js-i-lock); }
.js-i-map-marker-alt { --icon: var(--js-i-map-marker-alt); }
.js-i-mobile { --icon: var(--js-i-mobile); }
.js-i-percent { --icon: var(--js-i-percent); }

/* Home: references with a photo */
.js-refs { gap: 0 !important; margin: 0 !important; }
.js-refs > .wp-block-column { margin: 0 !important; }
.js-refs .wp-block-cover { min-height: 333px; height: 100%; padding: 17px; }
.js-refs .wp-block-cover:hover .wp-block-cover__background { opacity: .55; }
.js-ref-btn .wp-block-button__link { display: inline-flex; align-items: center; gap: 11px; background: transparent !important; color: #fff !important; border: 1px solid #fff; border-radius: 999px; padding: 10px 34px; font-size: 14px; }
.js-ref-btn .wp-block-button__link::after { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--js-i-long-arrow-alt-right) center / contain no-repeat; mask: var(--js-i-long-arrow-alt-right) center / contain no-repeat; }
.js-ref-btn .wp-block-button__link:hover, .js-ref-btn .wp-block-button__link:focus { background: #fff !important; color: var(--js-blue) !important; }

/* Home: who I am */
.js-me .wp-block-image { margin-bottom: 10px; }
.js-me h4 { margin: 0; }
.js-me p { margin: 4px 0 10px; }

/* Contact */
.js-contact-hero { min-height: 480px; padding: 60px 20px; margin: 0 !important; }
.js-contact-hero .wp-block-cover__inner-container { max-width: 760px; }
.js-contact-hero h1 { font-size: clamp(36px, 5vw, 50px); font-weight: 700; }
.js-contact-hero p { font-size: 14px; }
.wp-block-cover.js-contact-hero :is(h1, h4, p) { color: #fff !important; } /* Astra sets .entry-content p and headings with more weight */
.js-phone { font-size: 30px; margin-top: 0; }
.js-phone a { color: inherit; text-decoration: none; }
.js-map iframe { display: block; width: 100%; height: 400px; border: 0; filter: saturate(.8); }

/* FAQ */
.js-faq details { border: 1px solid #E4E4E4; border-top-width: 0; margin: 0 !important; background: #fff; }
.js-faq details:first-of-type { border-top-width: 1px; }
.js-faq summary { padding: 25px; cursor: pointer; list-style: none; display: flex; gap: 15px; align-items: center; font-weight: 600; color: var(--js-ink); }
.js-faq summary::-webkit-details-marker { display: none; }
.js-faq summary::before { content: "+"; font-size: 20px; line-height: 1; width: 12px; }
.js-faq details[open] summary { color: rgba(0, 124, 186, .97); }
.js-faq details[open] summary::before { content: "\2212"; }
.js-faq details > :not(summary) { padding: 0 25px 25px; margin: 0; }

/* Text pages (references, quote) */
.js-page { padding: 40px 20px 60px; margin: 0 !important; }

/* Footer (Astra footer widgets) */
.footer-adv .widget { margin-bottom: 0; }
.footer-adv, .footer-adv a, .footer-adv .widget-title, .footer-adv .widget h4.wp-block-heading { color: #fff; }
.footer-adv .ast-container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.footer-adv a:hover { color: #c9d4ff; }
.footer-adv .footer-adv-overlay { padding: 70px 0 50px; }
.js-footer-logo img { max-width: 260px; height: auto; }
.js-footer-logo { margin-bottom: 18px !important; }
ul.js-links, ul.js-contact { list-style: none; margin: 0; padding: 0; }
ul.js-links li, ul.js-contact li { position: relative; padding-left: 26px; margin-bottom: 20px; line-height: 1.4; }
ul.js-links li::before, ul.js-contact li::before { content: ""; position: absolute; left: 0; top: 3px; width: 13px; height: 13px; background: currentColor; -webkit-mask: var(--icon, var(--js-i-chevron-right)) center / contain no-repeat; mask: var(--icon, var(--js-i-chevron-right)) center / contain no-repeat; }
ul.js-links a, ul.js-contact a { text-decoration: none; }
.footer-adv h4 { font-size: 20px; margin-bottom: 18px; }
.footer-adv .wp-block-social-links { justify-content: center; max-width: 260px; }
.footer-adv .wp-block-social-links .wp-social-link { background: #fff !important; color: var(--js-navy) !important; }
.footer-adv .wp-block-social-links .wp-social-link:hover { background: #4c79ff !important; color: #fff !important; }