/*
 * Layout primitives for blocks.
 *
 * These reproduce how Elementor's flexbox containers and basic widgets lay out (same variable
 * names, same defaults, GPL), so a block converted from the original design computes exactly the
 * same sizes in the browser. Blocks set the variables per element in their own style.css.
 *
 *   .ew-e                container   (flex, width 100%, flex 0 1 auto, 1% default padding, 20px gap)
 *   .ew-e--boxed         boxed container: content capped at the site width inside .ew-e__inner
 *   .ew-e--full          full-width container: its own padding and gap
 *   .ew-w > .ew-w__c     widget wrapper (heading, text, image, button, icon list, divider)
 *   Widget type classes: .ew-heading, .ew-text, .ew-image, .ew-btnw (button), .ew-iconlist, .ew-divider
 */

/* ---------- Containers ---------- */
.ew-e {
	--display: flex;
	--flex-direction: column;
	--flex-wrap: nowrap;
	--flex-wrap-mobile: wrap;
	--justify-content: initial;
	--align-items: initial;
	--align-content: initial;
	--flex-basis: auto;
	--flex-grow: 0;
	--flex-shrink: 1;
	--width: 100%;
	--min-height: initial;
	--height: auto;
	--text-align: initial;
	--margin-top: 0px;
	--margin-right: 0px;
	--margin-bottom: 0px;
	--margin-left: 0px;
	--padding-top: 1%;
	--padding-right: 1%;
	--padding-bottom: 1%;
	--padding-left: 1%;
	--row-gap: 20px;
	--column-gap: 20px;
	--content-width: min(100%, 1300px);
	--border-radius: 0;
	--z-index: revert;
	--overflow: visible;
	--position: relative;
	--order: initial;
	--align-self: initial; /* reset per container, like Elementor, so it is not inherited */
	display: var(--display);
	order: var(--order, 0);
	align-self: var(--align-self, auto);
	flex: var(--flex-grow) var(--flex-shrink) var(--flex-basis);
	position: var(--position);
	width: var(--width);
	min-width: 0;
	height: var(--height);
	min-height: var(--min-height);
	margin: var(--margin-top) var(--margin-right) var(--margin-bottom) var(--margin-left);
	padding-inline: var(--padding-left) var(--padding-right);
	border-radius: var(--border-radius);
	overflow: var(--overflow);
	z-index: var(--z-index);
	transition: background .3s, border .3s, box-shadow .3s, transform .4s;
}
.ew-e--full {
	flex-direction: var(--flex-direction);
	flex-wrap: var(--flex-wrap);
	justify-content: var(--justify-content);
	align-items: var(--align-items);
	align-content: var(--align-content);
	gap: var(--row-gap) var(--column-gap);
	padding-block: var(--padding-top) var(--padding-bottom);
	text-align: var(--text-align);
}
.ew-e--boxed { flex-direction: column; flex-wrap: nowrap; }
.ew-e--boxed > .ew-e__inner {
	display: var(--display);
	flex: 1 1 auto;
	flex-direction: var(--flex-direction);
	flex-wrap: var(--flex-wrap);
	justify-content: var(--justify-content);
	align-items: var(--align-items);
	align-content: var(--align-content);
	gap: var(--row-gap) var(--column-gap);
	width: 100%;
	max-width: var(--content-width);
	height: 100%;
	margin: 0 auto;
	padding-block: var(--padding-top) var(--padding-bottom);
	text-align: var(--text-align);
}
/* Top-level sections are centred (Elementor's root containers). */
.ew-section { --margin-left: auto; --margin-right: auto; max-width: min(100%, var(--width)); }

@media (max-width: 1024px) { .ew-e { --content-width: min(100%, 1024px); } }
@media (max-width: 767px) { .ew-e { --content-width: min(100%, 767px); --flex-wrap: var(--flex-wrap-mobile); } }

/* ---------- Widgets ---------- */
/* Flex settings are reset per element (as Elementor does), so a widget never inherits its container's. */
.ew-w { --flex-grow: initial; --flex-shrink: initial; --flex-basis: initial; --align-self: initial; position: relative; min-width: 0; max-width: 100%; align-self: var(--align-self, auto); flex: var(--flex-grow, 0) var(--flex-shrink, 1) var(--flex-basis, auto); }
.ew-w > .ew-w__c { height: 100%; }
/* Inside containers a widget never overflows its custom width (Elementor's ".elementor.elementor .e-con > .elementor-widget"). */
.ew-e > .ew-w.ew-w.ew-w,
.ew-e > .ew-e__inner > .ew-w.ew-w.ew-w { max-width: 100%; }
/* Absolutely positioned widget (Elementor "Position: Absolute") and widget transforms (Elementor "Transform"). */
.ew-w.ew-abs { position: absolute; z-index: 1; }
.ew-tf > .ew-w__c { transform: translateX(var(--e-transform-translateX, 0)) translateY(var(--e-transform-translateY, 0)) rotate(var(--e-transform-rotateZ, 0)); }

/* Heading */
.ew-heading__title { margin: 0; padding: 0; line-height: 1; }
/* The kit's h2 / h3 line height outranked Elementor's heading reset on the live site. */
h2.ew-heading__title, h3.ew-heading__title { line-height: 1.1em; }
.ew-heading__title a { color: inherit; }

/* Text editor */
.ew-text p { margin-block-end: .9rem; }

/* Image */
.ew-image { text-align: center; }
.ew-image a { display: inline-block; }
.ew-image img { display: inline-block; vertical-align: middle; }

/* Button (Elementor base + kit global button styles) */
.ew-btn,
.ew-btn:visited {
	display: inline-block;
	padding: 20px 40px;
	border-radius: 0;
	background-color: var(--ew-purple);
	color: var(--ew-white);
	fill: var(--ew-white);
	font-family: var(--ew-font-gibson);
	font-size: 20px;
	font-weight: 700;
	line-height: 1em;
	text-align: center;
	text-transform: uppercase;
	transition: all .3s;
}
/* Doubled class: beats a block's normal-state button rules, loses to its hover rules (as the kit did). */
.ew-btn.ew-btn:hover,
.ew-btn.ew-btn:focus { background-color: var(--ew-off-white); color: var(--ew-purple); }
.ew-btn__wrap { display: flex; flex-direction: row; gap: 5px; justify-content: center; }
.ew-btn__icon { display: flex; align-items: center; }
.ew-btn__icon svg { width: 1em; height: 1em; fill: currentColor; }
.ew-btn__text { display: inline-block; }
.ew-w--btn-justify .ew-btn { width: 100%; }

/* Icon list */
.ew-il { margin: 0; padding: 0; list-style: none; }
.ew-il__item { position: relative; display: flex; align-items: var(--icon-vertical-align, center); margin: 0; padding: 0; font-size: inherit; }
.ew-il__item > a { display: flex; align-items: var(--icon-vertical-align, center); font-size: inherit; }
.ew-il__icon { position: relative; top: var(--icon-vertical-offset, initial); display: flex; text-align: var(--e-icon-list-icon-align); }
.ew-il__icon svg { width: var(--e-icon-list-icon-size, 1em); height: var(--e-icon-list-icon-size, 1em); margin: var(--e-icon-list-icon-margin, 0 calc(var(--e-icon-list-icon-size, 1em) * .25) 0 0); fill: currentColor; }
.ew-il__icon + .ew-il__text { align-self: center; padding-inline-start: 5px; }
.ew-il__text { min-width: 0; overflow-wrap: anywhere; } /* long e-mail addresses wrap instead of running off small screens */
.ew-il--center .ew-il__item, .ew-il--center .ew-il__item > a { justify-content: center; }

/* Divider */
.ew-divider { --divider-border-style: solid; --divider-border-width: 1px; --divider-color: #0c0d0e; }
.ew-divider__line { display: flex; }
.ew-divider__sep { display: flex; margin: 0; border-block-start: var(--divider-border-width) var(--divider-border-style) var(--divider-color); }

/* Icon (single icon widget) */
.ew-iconw__wrap { text-align: center; }
.ew-iconw__icon { display: inline-block; line-height: 1; color: #69727d; text-align: center; transition: all .3s; }
.ew-iconw__icon svg { position: relative; display: block; width: 1em; height: 1em; fill: currentColor; }

/* Social icons (Elementor social icons widget, "auto" columns) */
.ew-socialw { --icon-size: 25px; --icon-padding: .5em; --grid-column-gap: 5px; --grid-row-gap: 0px; }
.ew-social { display: inline-block; width: 100%; font-size: 0; margin-bottom: calc(-1 * var(--grid-row-gap)); word-spacing: var(--grid-column-gap); }
.ew-social__item { display: inline-block; margin-bottom: var(--grid-row-gap); word-break: break-word; }
.ew-social__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--icon-size) + 2 * var(--icon-padding));
	height: calc(var(--icon-size) + 2 * var(--icon-padding));
	padding: var(--icon-padding);
	border-radius: 3px;
	background-color: var(--ew-off-white);
	color: var(--ew-purple);
	font-size: var(--icon-size);
	line-height: var(--icon-size);
	text-align: center;
	cursor: pointer;
	transition: all .3s;
}
.ew-social__icon svg { position: relative; display: block; width: 1em; height: 1em; fill: currentColor; }
.ew-accent { color: var(--ew-mustard); }

/* ---------- Video (Elementor video widget) ---------- */
.ew-video { width: 100%; }
.ew-video > .ew-w__c { overflow: hidden; transform: translateZ(0); }
.ew-video__wrap { position: relative; width: 100%; }
.ew-video__el { display: flex; width: 100%; height: 100%; border: none; background-color: #000; object-fit: cover; }

.ew-video__overlay,
.ew-video__overlay:hover,
.ew-video__overlay:focus { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background: #000 center / cover no-repeat; cursor: pointer; }
.ew-video__play { position: absolute; top: 50%; left: 50%; display: flex; transform: translate3d(-50%, -50%, 0); }
.ew-video__play svg { width: 100px; height: 100px; fill: #fff; opacity: .8; filter: drop-shadow(1px 0 6px rgba(0, 0, 0, .3)); transition: opacity .5s; }
.ew-video__overlay:hover .ew-video__play svg { opacity: 1; }