/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.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
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* -------------------------------------------------------------------------
 * Accessible clear ("X") button for the Elementor Pro Search widget.
 * The clear control is wrapped server-side (see functions.php) in a real
 * <button type="reset">. These rules pin it to the end of the field, size the
 * glyph (now a grandchild of the wrapper), strip default button chrome, and
 * reproduce Elementor's "hide while the field is empty" behaviour that its JS
 * handled via .hidden. Selectors are intentionally NOT scoped to
 * .elementor-widget-search so they hold even if the widget wrapper class
 * differs. var() fallbacks cover the case where Elementor's custom properties
 * are not in scope. Logical properties keep this correct in RTL.
 * ---------------------------------------------------------------------- */
.e-search-input-wrapper > .e-search-clear {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: var(--e-search-input-padding-inline-end, 16px);
	transform: translateY(-50%);
	z-index: 11; /* above the input; label icon sits at z-index:10 */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	border-radius: 0;
	-webkit-appearance: none;
	appearance: none;
	color: var(--e-search-icon-clear-color, #cdcdcd);
	font-size: 0; /* neutralise inherited text sizing */
	line-height: 0;
	cursor: pointer;
	transition: color var(--e-search-icon-clear-transition, 0.3s),
		fill var(--e-search-icon-clear-transition, 0.3s);
}

.e-search-input-wrapper > .e-search-clear > svg {
	display: block;
	fill: var(--e-search-icon-clear-color, #cdcdcd);
	height: var(--e-search-icon-clear-size, 12px);
	width: auto;
}

.e-search-input-wrapper > .e-search-clear > i {
	color: var(--e-search-icon-clear-color, #cdcdcd);
	font-size: var(--e-search-icon-clear-size, 12px);
}

/* Hide (and remove from tab order) while the field is empty — the placeholder
 * is shown only when the input has no value. The widget always sets a
 * placeholder, so this reliably mirrors the JS show/hide. */
.e-search-input:placeholder-shown ~ .e-search-clear {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* Elementor's JS now measures a 0-width clear icon and adds .no-icon-clear,
 * which strips the trailing padding. Restore room so text doesn't sit under
 * the X. */
.e-search-input.no-icon-clear {
	padding-inline-end: calc(
		var(--e-search-input-padding-inline-end, 16px) +
		var(--e-search-icon-clear-size, 12px) +
		var(--e-search-input-gap, 4px)
	);
}

/* Visible keyboard focus indicator. */
.e-search-input-wrapper > .e-search-clear:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * Reflow (WCAG 1.4.10): content must not be clipped when the page is zoomed
 * to 400%, which leaves roughly 320px of usable width.
 *
 * Every rule below is a no-op while the content still fits — they only take
 * effect once a box would otherwise overflow or be cut off. There is no width
 * media query, deliberately: a 320px viewport is indistinguishable from a
 * phone, so a breakpoint here would change the mobile layout too. Letting the
 * boxes shrink and the text wrap fixes the zoomed case without touching
 * desktop, laptop or phone rendering.
 * ---------------------------------------------------------------------- */

/* Form fields: flex/grid children default to min-width:auto, which keeps an
 * input at its intrinsic width and pushes it past the edge of the form. */
.elementor-form .elementor-field-group {
	min-width: 0;
}

.elementor-form .elementor-field-group > .elementor-field-textual,
.elementor-form .elementor-field-group > .elementor-select-wrapper {
	max-width: 100%;
	min-width: 0;
}

/* The consent checkbox and its long label ("I agree to ICL processing and
 * storing my personal data…"): keep the box at its own size and give the text
 * the remaining width to wrap into, instead of letting it run off the row. */
.elementor-field-type-acceptance .elementor-field-option {
	display: flex;
	align-items: flex-start;
	gap: 0.5em;
}

.elementor-field-type-acceptance .elementor-field-option input[type="checkbox"] {
	flex: 0 0 auto;
	margin-top: 0.25em;
}

.elementor-field-type-acceptance .elementor-field-option label {
	flex: 1 1 auto;
	min-width: 0;
	white-space: normal;
	overflow-wrap: break-word;
}

/* Headings clip rather than wrap when Elementor is asked not to break them
 * (e.g. "Important Documents"). Wrapping is only reachable when the heading no
 * longer fits on one line, so wide screens keep their single-line look.
 *
 * `anywhere` rather than `break-word`, which was not enough: the two behave
 * identically once a line is being laid out, but only `anywhere` is allowed to
 * reduce the element's min-content width. With `break-word` the heading still
 * reports "Documents" at its full display size — around 400px — as the
 * narrowest it can be, so the flex container around it refuses to shrink below
 * that, the section overflows a 320px viewport, and the text is clipped at the
 * edge with no way to scroll to it. That is what the audit photographed: the
 * heading had wrapped onto two lines, and both lines were still cut off. */
.elementor-widget-heading .elementor-heading-title {
	white-space: normal;
	overflow-wrap: anywhere;
}

/* Elementor's containers are flex, and a flex item may not shrink below its
 * min-content width unless told it may. Paired with the rule above, this is
 * what lets the section actually narrow to the viewport. */
.elementor-widget-heading {
	min-width: 0;
}

/* Elementor renders a form's column gutter as a negative margin on the fields
 * wrapper, cancelled by matching padding on every field group:
 *
 *     .elementor-1340 .elementor-element.elementor-element-ef9a058
 *     .elementor-form-fields-wrapper {
 *         margin-left:  calc(-50px / 2);
 *         margin-right: calc(-50px / 2);
 *     }
 *
 * so the wrapper is permanently 50px wider than the form that holds it. On a
 * wide screen that overhang disappears into the container's side padding and
 * nobody notices. At the ~320px that 400% zoom leaves there is no padding left
 * to absorb it, so the fields and the consent text are cut off at the viewport
 * edge — the audit's form reflow findings on Contact Us, Home and LinkedIn.
 *
 * The min-width rules above cannot reach this: the fields are not what
 * overflows, their wrapper is, and no amount of shrinking a child pulls a
 * parent's negative margin back inside the page.
 *
 * Dropping the negative margin together with the padding that compensates for
 * it is visually neutral — the two cancel out, so field content keeps exactly
 * the position it has now. All that goes is the gutter between fields sharing
 * a row, and by this width Elementor has already stacked them one per row.
 *
 * !important is unavoidable: the generated rule is scoped per page and per
 * widget (four classes), which outranks anything that can be written here
 * without hard-coding a post id that changes with every page.
 * ---------------------------------------------------------------------- */
@media (max-width: 767px) {
	.elementor-form .elementor-form-fields-wrapper {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.elementor-form .elementor-form-fields-wrapper > .elementor-field-group {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* The last two boxes that still push the page wider than the window at 320px.
 * Both are scoped to 400px rather than the 767px mobile breakpoint: neither
 * overflows above roughly 374px, so there is no reason to change how the site
 * looks on an ordinary phone to satisfy a 400%-zoom requirement.
 *
 * 1. An absolutely positioned decorative image (a fadeInRight flourish) sits
 *    54px past the right edge. Being absolute, it extends the document's
 *    scrollable width and so causes the horizontal scrolling that 1.4.10
 *    forbids. It carries no information, so it is dropped at this width rather
 *    than repositioned. Elementor's own Advanced > Responsive > Hide On Mobile
 *    toggle on the widget does the same thing and is the better home for it if
 *    the design is ever revisited — this rule is the code-side equivalent, and
 *    is safe to delete if that toggle is set instead.
 *
 * 2. The mobile menu dropdown computes to width:320px but measures 326px,
 *    because its border sits outside the declared width. border-box folds the
 *    border back in; the max-width is belt and braces for any other stray
 *    padding. */
@media (max-width: 400px) {
	.elementor-element-529a274 {
		display: none;
	}

	.elementor-nav-menu--dropdown.elementor-nav-menu__container {
		box-sizing: border-box;
		max-width: 100vw;
	}
}

/* -------------------------------------------------------------------------
 * The footer form at 320px. Removing the gutter margin above is necessary but
 * not sufficient here, because the form has a hard lower bound on its width:
 *
 *   Cloudflare Turnstile renders into a fixed 300px-wide iframe. A fixed width
 *   is the element's min-content width, so it becomes the min-content width of
 *   the form around it. Every field measures exactly 300px for that reason —
 *   they are sitting on the floor Turnstile sets, not choosing that width.
 *
 * With the widget's own 30px of side padding and a 30px offset from its parent,
 * 300 becomes 390 — roughly 70px past a 320px viewport. So three things have to
 * give at once, and no one of them is enough alone.
 *
 * `zoom` rather than `transform: scale()`: transforms are painted after layout,
 * so a scaled iframe still reserves its full 300px and the overflow survives.
 * zoom is layout-affecting, which is the whole point, and needs no companion
 * rule to claw back the leftover height.
 *
 * Better, if the option is reachable: set the Turnstile field to its "compact"
 * size (150x140) in the form widget's settings. That is a supported Cloudflare
 * mode rather than a visual trick, and it removes the need for the zoom rule —
 * delete it if compact mode is switched on.
 * ---------------------------------------------------------------------- */
@media (max-width: 480px) {
	.elementor-turnstile-field,
	.cf-turnstile {
		min-width: 0;
	}

	/* 300px * 0.72 = 216px, inside the ~270px left after the padding below. */
	.cf-turnstile {
		zoom: 0.72;
	}

	/* 30px of padding either side is a tenth of the viewport at this width. */
	.elementor-widget-form {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}
}

/* -------------------------------------------------------------------------
 * Long text descriptions for complex images (WCAG 1.1.1, technique G73).
 * The description is referenced by the image's aria-describedby, so it must
 * stay in the accessibility tree — hide it visually only, never with
 * display:none or visibility:hidden.
 * ---------------------------------------------------------------------- */
.complex-image-desc {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* -------------------------------------------------------------------------
 * Pause / play control for container background videos (WCAG 2.2.2, Pause,
 * Stop, Hide). Elementor autoplays and loops these with no control of any
 * kind. The button is injected by js/accordion-a11y.js as a child of the
 * element that owns the video — not of .elementor-background-video-container,
 * which Elementor makes pointer-events:none at z-index 0, underneath both the
 * background overlay and the content.
 * ---------------------------------------------------------------------- */
.a11y-video-host {
	/* Elementor's containers are relative already; this only guarantees the
	 * button positions against the video's element and not against the page. */
	position: relative;
}

.a11y-video-toggle {
	position: absolute;
	inset-block-end: 16px;
	inset-inline-end: 16px;
	/* Above the background overlay and the container's own content, both of
	 * which stack at auto. */
	z-index: 10;
	/* Never inherit the wrapper's pointer-events:none, whichever element the
	 * button ends up on. */
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 44px: the minimum comfortable target size (WCAG 2.5.5). */
	width: 44px;
	height: 44px;
	padding: 0;
	border: 2px solid #ffffff;
	border-radius: 50%;
	/* Dark fill under a white glyph: ~15:1 against the icon and well past 3:1
	 * against any frame of the video behind it. */
	background-color: #002846;
	color: #ffffff;
	cursor: pointer;
	transition: background-color 0.2s, transform 0.2s;
}

.a11y-video-toggle:hover,
.a11y-video-toggle:focus-visible {
	background-color: #013c68;
}

.a11y-video-toggle:hover {
	transform: scale(1.05);
}

.a11y-video-toggle:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 2px;
}

.a11y-video-toggle svg {
	display: block;
	width: 18px;
	height: 18px;
	fill: currentColor;
	pointer-events: none;
}

/* Only one of the two glyphs is ever shown; the state lives on the button. */
.a11y-video-toggle .a11y-video-toggle__pause {
	display: block;
}

.a11y-video-toggle .a11y-video-toggle__play {
	display: none;
}

.a11y-video-toggle[aria-pressed="true"] .a11y-video-toggle__pause {
	display: none;
}

.a11y-video-toggle[aria-pressed="true"] .a11y-video-toggle__play {
	display: block;
}

/* Elementor hides background video on mobile; hide the orphaned control too.
 * Its own rule is scoped to the video wrapper, which the button no longer sits
 * in, so the breakpoint (767px) is repeated here. The class is copied onto the
 * button by js/accordion-a11y.js. */
@media (max-width: 767px) {
	.a11y-video-toggle.elementor-hidden-mobile {
		display: none;
	}
}

/* -------------------------------------------------------------------------
 * Breadcrumb trail (WCAG 2.4.8 / 1.3.1). Output by functions.php via Yoast,
 * which already marks the current page with aria-current="page".
 * ---------------------------------------------------------------------- */
.site-breadcrumb {
	/* Elementor publishes its content width as --container-max-width, but only
	 * on .e-con, so a band outside any container cannot inherit it. These
	 * mirror the kit's own values (Site Settings → Layout → Content Width,
	 * currently 1350px, dropping to the tablet and mobile breakpoints) so the
	 * trail lines up with the content of the container below it. If the site's
	 * content width changes, change it here too. */
	--breadcrumb-max-width: 1350px;
	/* Breathing room at the screen edge on viewports narrower than the content
	 * width. Set to 0 to sit exactly flush with a container that has no
	 * horizontal padding of its own. */
	--breadcrumb-gutter: 20px;

	padding: 12px var(--breadcrumb-gutter);
	background-color: #ffffff;
	/* Applies to the ">" separators between crumbs: 6.9:1 on white, so the
	 * trail stays legible rather than fading out. */
	color: #4a5c6b;
	font-size: 15px;
	line-height: 1.6;
}

.site-breadcrumb__inner {
	max-width: var(--breadcrumb-max-width);
	margin-inline: auto;
}

/* Elementor's own breakpoints, from the same generated stylesheet. */
@media (max-width: 1024px) {
	.site-breadcrumb {
		--breadcrumb-max-width: 1024px;
	}
}

@media (max-width: 767px) {
	.site-breadcrumb {
		--breadcrumb-max-width: 767px;
	}
}

.site-breadcrumb a {
	/* 15.1:1 on white — passes 4.5:1 with a wide margin, and stays
	 * distinguishable from the plain text of the current page. */
	color: #002846;
	text-decoration: underline;
	/* Pad the hit area out to a comfortable target without moving the line. */
	padding: 6px 2px;
}

.site-breadcrumb a:hover {
	text-decoration-thickness: 2px;
}

.site-breadcrumb a:focus-visible {
	outline: 2px solid #002846;
	outline-offset: 2px;
	border-radius: 2px;
}

/* The current page is not a link, so it must not look like one. */
.site-breadcrumb .breadcrumb_last {
	color: #002846;
	font-weight: 600;
}


/* -------------------------------------------------------------------------
 * Placeholder text contrast (WCAG 1.4.3), for every input and textarea.
 *
 * Two rules on the site undercut it:
 *   - Elementor forms: `.elementor-field-group .elementor-field-textual
 *     ::placeholder { color: inherit; opacity: .6 }` — the .6 is what fades
 *     the Contact Us fields below 4.5:1;
 *   - the header Search widget, which Elementor colours through
 *     --e-search-placeholder-color.
 * #737373 on white is 4.74:1. opacity: 1 because browsers (and Elementor)
 * dim placeholders by default, which lowers the effective contrast whatever
 * the colour. !important because the Elementor rules above are generated per
 * widget and can be more specific than anything written here.
 * EAEL's "placeholder-hide" option still hides its placeholders: that uses
 * visibility: hidden, which this does not touch.
 *
 * Separate rules on purpose: a browser that does not recognise one of these
 * pseudo-elements drops the whole rule it appears in.
 * ---------------------------------------------------------------------- */
input::placeholder,
textarea::placeholder {
	color: #737373 !important;
	opacity: 1 !important;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
	color: #737373 !important;
	opacity: 1 !important;
}

/* The header search field was transparent, over a header that is itself only
 * 44% white over a blurred copy of the page. Behind a dark hero image that
 * puts the placeholder on a mid-grey, where no grey can reach 4.5:1. A solid
 * white field makes the 4.74:1 above hold everywhere; the field's black
 * border and rounded shape are unchanged. (Same as setting the widget's
 * Style > Input > Background Color to #FFFFFF in Elementor.) */
.elementor-widget-search .e-search-input {
	background-color: #ffffff !important;
}

/* -------------------------------------------------------------------------
 * Carousel Previous / Next arrows (WCAG 1.4.11 Non-text Contrast).
 *
 * functions.php turns these into real <button>s; the first block clears the
 * styling Hello's reset.css gives every button (pink border, padding, pink
 * hover fill). Specificity is two classes so it outranks Hello's
 * `[type=button]:hover` while staying below Elementor's per-widget settings.
 *
 * Contrast: the arrow's ring was #02B5D3 — 2.46:1 on white and 2.1:1 on the
 * section's #EDEDED, under the 3:1 a control boundary needs. The arrows sit
 * at the very edges of the slide, over the team photos on one side and the
 * plain background on the other, so the fix has to hold on any colour:
 *   - the ring is now navy #002846 (15.1:1 on white, 12.9:1 on #EDEDED);
 *   - the button is a solid white disc slightly larger than the drawn
 *     circle, so a white band sits outside the ring.
 * Navy and white together guarantee at least 3.9:1 against any background:
 * on a light one the navy ring stands out, on a dark photo the white band
 * does. The arrow glyph is #404040 on white, 10.4:1.
 * ---------------------------------------------------------------------- */
.elementor-element .elementor-swiper-button {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	line-height: 0;
	-webkit-appearance: none;
	appearance: none;
	background-color: #ffffff;
	border-radius: 50%;
	/* Glyph colour for Elementor's default (font/svg icon) arrows. */
	--arrow-normal-color: #002846;
	--arrow-hover-color: #002846;
}

.elementor-element .elementor-swiper-button:hover,
.elementor-element .elementor-swiper-button:focus {
	background-color: #ffffff;
	color: var(--arrow-normal-color);
}

/* The site's custom arrow icon draws its ring in #02B5D3. */
.elementor-swiper-button svg path[stroke="#02B5D3" i] {
	stroke: #002846;
}

/* Elementor fills the arrow svg with --arrow-normal-color. The custom icon's
 * arrow strokes have no fill of their own, so they would inherit it and the
 * open chevron would turn into a solid triangle. Stroked-only paths stay
 * unfilled, as drawn. */
.elementor-swiper-button svg path[stroke]:not([fill]) {
	fill: none;
}

/* Focus: a white band around the disc, then a navy outline — visible on the
 * light background and on a dark photo alike. */
.elementor-element .elementor-swiper-button:focus-visible {
	outline: 3px solid #002846;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px #ffffff;
}

/* -------------------------------------------------------------------------
 * Pause / play control for auto-rotating carousels (WCAG 2.2.2). Injected by
 * js/accordion-a11y.js directly before the slides. Same look as the
 * background-video toggle above, with a visible text label.
 * ---------------------------------------------------------------------- */
.a11y-carousel-toggle {
	position: relative;
	/* Above the slides, which Swiper stacks at z-index 1. */
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 8px;
	width: fit-content;
	/* Right-aligned above the slides (left in RTL). */
	margin: 0 0 12px auto;
	margin-inline-start: auto;
	margin-inline-end: 0;
	/* 44px: the minimum comfortable target size (WCAG 2.5.5). */
	min-height: 44px;
	padding: 0 18px;
	/* Navy on the section's #EDEDED / #F9F9F9: 12.9:1 / 14.3:1, so the
	 * control's shape is well past 3:1; white text on navy is 15.1:1. */
	border: 2px solid #002846;
	border-radius: 22px;
	background-color: #002846;
	color: #ffffff;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s;
}

.a11y-carousel-toggle:hover,
.a11y-carousel-toggle:focus {
	background-color: #013c68;
	color: #ffffff;
}

.a11y-carousel-toggle:focus-visible {
	outline: 3px solid #002846;
	outline-offset: 2px;
}

.a11y-carousel-toggle svg {
	display: block;
	width: 16px;
	height: 16px;
	fill: currentColor;
	pointer-events: none;
}

/* Only one glyph shows; the state lives on the button's class. */
.a11y-carousel-toggle .a11y-carousel-toggle__play,
.a11y-carousel-toggle.is-paused .a11y-carousel-toggle__pause {
	display: none;
}

.a11y-carousel-toggle.is-paused .a11y-carousel-toggle__play {
	display: block;
}

/* -------------------------------------------------------------------------
 * Cookie preference center: functions.php moves the Close button ahead of
 * the title in the DOM (WCAG 2.4.3). The header is a flex row with
 * space-between, so this puts the button back on the right where it was.
 * ---------------------------------------------------------------------- */
.wcc-preference-header .wcc-btn-close {
	order: 2;
}