/* Base Theme Foundation: foundation.css. Core styles shared by every site: utility classes, accessibility,
   Gravity Forms (driven by Elementor's Theme Style), third-party fixes. Loads after hello.css and before the
   child theme's style.css, so the theme wins ties. Design choices (list styles, menu buttons, fonts, colours)
   belong in the child theme, not here. */

/* UTILITY CLASSES */

body {	
	display:block;
	max-width:100%;
	height:auto;
	overflow-x: hidden; }
.swiper-button-right, .swiper-button-next { text-align:right; }

.whiteText, .whiteText p, .whiteText h1, .whiteText h2, .whiteText h3, .whiteText h4, .whiteText li, .whiteText li:before, .whiteText a:not(.elementor-button), .whiteText a:not(.elementor-button):hover { color: #ffffff !important; }

.underlineLinks a:not(.elementor-button):hover, .alwaysUnderline a:not(.elementor-button) { text-decoration: underline; }
.noUnderline a:hover { text-decoration: none !important; }


ul.elementor-nav-menu--dropdown a, ul.elementor-nav-menu--dropdown a:focus, ul.elementor-nav-menu--dropdown a:hover {
    border-left: none;
}

.lastParagraph p:last-of-type {margin-bottom:0;}

@media (max-width:767px) {
	.mobileHide { display: none !important; }
	.desktopShow { display: none !important; }
	.menu-item-has-children .sub-menu .menu-item .elementor-sub-item {padding-left:2rem !important;}
}

@media (min-width:768px) {
	.mobileShow { display: none !important; }
}

@media (max-width: 640px) {
.wp-block-image figure {
	float: none;
	width: 100% !important;
	clear: both;
	text-align: center;
	}
}

.fullWidth {
	margin-left: -50vw;
	margin-right: -50vw;
	max-width: 100vw !important;
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw;
}

/* SPLIT SECTIONS: add to the image column (inner container) of a BOXED section so it bleeds
   to the viewport edge while the text column stays on the boxed grid. Desktop only; stacks below 1025px. */
@media (min-width: 1025px) {
	.fullWidthRight {
		width: calc(50% + (100vw - 100%) / 2) !important;
		max-width: none !important;
		margin-right: calc((100% - 100vw) / 2) !important;
	}
	.fullWidthLeft {
		width: calc(50% + (100vw - 100%) / 2) !important;
		max-width: none !important;
		margin-left: calc((100% - 100vw) / 2) !important;
	}
}

/* ACCESSIBILITY (skip-link / screen-reader-text styling is in the child theme, next to the header.php that prints them) */

@supports selector(:focus-visible) {
	:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; } /* matches the text colour of whatever has focus */
}

/* Links inside running text are underlined, so they don't rely on colour alone (WCAG 1.4.1): Text Editor widgets, and
   block/classic post content (Elementor's Post Content widget, or Hello's own templates). Elementor-built content
   rendered through the Post Content widget (Theme Builder page templates) isn't touched, nor are buttons. To opt a
   widget or section out (e.g. a footer link list), give it the class noUnderline. */
.elementor-widget-text-editor a[href]:not(.elementor-button, .noUnderline *),
.elementor-widget-theme-post-content a[href]:not(.elementor-widget-theme-post-content .elementor *, .wp-block-button__link, .wp-element-button, .noUnderline *),
:is(.page-content, .entry-content) :is(p, li, dd, td, th, figcaption, blockquote) a[href]:not(.elementor *, .noUnderline *) {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* FIX LIGHTBOX BUTTONS */

.fancybox-container .fancybox-button {
    display: inline-block;
    height: 44px;
    margin: 0;
    outline: 0;
    padding: 6px !important;
    vertical-align: top;
    width: 44px;
    color: #FFFFFF;
    background-color: #000000;
    border-color: #000000;
}

.fancybox-container .fancybox-button:hover, .fancybox-container .fancybox-navigation a:hover {
    color: #FFFFFF;
    background-color: #777777;
    border-color: #777777;
}

.fancybox-container .fancybox-button svg path {
    width: 24px;
}


/* ELEMENTOR PRO POST NAVIGATION: full titles wrap instead of being cut off, with more room either side of the divider.
   The widget's title typography has no line-height control, so titles inherit the body's; set one here. */
.elementor-post-navigation .elementor-post-navigation__link,
.elementor-post-navigation .elementor-post-navigation__link__prev,
.elementor-post-navigation .elementor-post-navigation__link__next,
.elementor-post-navigation :is(.post-navigation__prev--title, .post-navigation__next--title) { white-space: normal; overflow: visible; text-overflow: clip; }
.elementor-post-navigation :is(.post-navigation__prev--title, .post-navigation__next--title) { line-height: 1.3; }
.elementor-post-navigation .elementor-post-navigation__prev { padding-right: 2rem; }
.elementor-post-navigation .elementor-post-navigation__next { padding-left: 2rem; }
@media (max-width: 767px) {
	.elementor-post-navigation .elementor-post-navigation__prev { padding-right: 1rem; }
	.elementor-post-navigation .elementor-post-navigation__next { padding-left: 1rem; }
}

/* UAE IMAGE CAROUSEL ARROWS: they are <button>s, so they pick up the global button styles: a coloured square on hover,
   and the button letter spacing widens the hidden "Previous"/"Next" text so the icon sits off-centre. The box wraps the
   icon, with no background in any state; white chevron with a soft shadow, dimming on hover. */
.uael-img-carousel-wrap .slick-arrow,
.uael-img-carousel-wrap .slick-arrow:is(:hover, :focus, :active) {
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	letter-spacing: 0;
	background: transparent;
	color: #fff;
	filter: drop-shadow( 0 1px 3px rgba( 0, 0, 0, 0.45 ) );
	transition: opacity 0.2s;
}
.uael-img-carousel-wrap .slick-arrow:hover { opacity: 0.75; }
.uael-img-carousel-wrap .slick-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.uael-img-carousel-wrap .slick-arrow::before { color: inherit; opacity: 1; }

/* ELEMENTOR BACKGROUND VIDEO (Vimeo / YouTube): no layout shift. The player script first inserts the iframe as a plain
   426x240 box at the top of the section; Elementor centres and enlarges it once the player loads, which Chrome counts
   as a layout shift (0.16 to 0.56 on mobile heroes). This gives the iframe its final centred 16:9 cover size from the
   start, using container query units, so Elementor's later resize changes nothing. Self-hosted <video> backgrounds are
   untouched. With WP Rocket Remove Unused CSS on, safelist `.elementor-background-video-container`: the iframe isn't in
   the HTML when the used CSS is built, so RUCSS would drop the iframe rule. */
.elementor-background-video-container { container-type: size; }
.elementor-background-video-container iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	max-width: none;
	width: max( 100cqw, 177.7778cqh );
	height: max( 100cqh, 56.25cqw );
}


/* GRAVITY FORMS
   Forms added by shortcode or block follow Elementor's Site Settings > Theme Style > Buttons and Form Fields, and look
   the same in either GF theme (Orbital or "Gravity Forms 2.5"). The plugin (gravity-forms.php) publishes
   those settings as --ows-btn-*, --ows-field-* and --ows-label-*; the fallbacks below are Hello Elementor's
   defaults, used for anything Theme Style leaves empty. Forms placed with UAE's Gravity Forms Styler are styled by UAE
   and skipped (:not(.uael-gf-style *)), apart from the spacing rules in the first block, which every form shares.
   Small text (sub-labels, descriptions, consent, .disclaimer) is 0.9rem. */

/* All forms, UAE-styled ones included: field spacing, label gap, italic descriptions */
.gform-theme--framework {
	--gf-form-gap-y: 1.25rem !important;
	--gf-label-space-primary: 0.25rem !important;
	--gf-label-choice-field-space-primary: 0.25rem !important;
	--gf-ctrl-desc-font-style: italic !important;
	--gf-ctrl-desc-font-style-error: normal !important;
}
body .gform_wrapper.gravity-theme .gform_fields {
	row-gap: 1.25rem;
}
body .gform_wrapper.gravity-theme .gfield_label {
	margin-bottom: 0.25rem;
}
body .gform_wrapper.gravity-theme .gfield_description:not(.validation_message) {
	font-style: italic;
}
body .gform_wrapper .gfield_consent_label,
body .gform_wrapper .gform_body .disclaimer {
	font-size: 0.9rem;
}

/* Orbital theme: point GF's own variables at Theme Style. GF prints its defaults inline on each form, hence !important. */
.gform-theme--framework:not(.uael-gf-style *) {
	--gf-color-primary: var(--e-global-color-primary) !important;
	--gf-color-primary-darker: var(--e-global-color-accent) !important;
	--gf-color-primary-lighter: var(--e-global-color-accent) !important;
	--gf-ctrl-choice-check-color: var(--e-global-color-primary) !important;
	--gf-ctrl-accent-color: var(--e-global-color-primary) !important;
	--gf-ctrl-outline-color-focus: var(--e-global-color-primary) !important;

	/* Buttons */
	--gf-ctrl-btn-bg-color-primary: var(--ows-btn-bg, var(--e-global-color-primary)) !important;
	--gf-ctrl-btn-bg-color-hover-primary: var(--ows-btn-bg-hover, var(--ows-btn-bg, var(--e-global-color-primary))) !important;
	--gf-ctrl-btn-bg-color-focus-primary: var(--ows-btn-bg-hover, var(--ows-btn-bg, var(--e-global-color-primary))) !important;
	--gf-ctrl-btn-color-primary: var(--ows-btn-color, #fff) !important;
	--gf-ctrl-btn-color-hover-primary: var(--ows-btn-color-hover, var(--ows-btn-color, #fff)) !important;
	--gf-ctrl-btn-color-focus-primary: var(--ows-btn-color-hover, var(--ows-btn-color, #fff)) !important;
	--gf-ctrl-btn-border-style-primary: var(--ows-btn-border-style, solid) !important;
	--gf-ctrl-btn-border-width-primary: var(--ows-btn-border-width, 0) !important;
	--gf-ctrl-btn-border-color-primary: var(--ows-btn-border-color, transparent) !important;
	--gf-ctrl-btn-border-color-hover-primary: var(--ows-btn-border-color-hover, var(--ows-btn-border-color, transparent)) !important;
	--gf-ctrl-btn-border-color-focus-primary: var(--ows-btn-border-color-hover, var(--ows-btn-border-color, transparent)) !important;
	--gf-ctrl-btn-radius: var(--ows-btn-radius, 3px) !important;
	--gf-ctrl-btn-size: auto !important;
	--gf-ctrl-btn-padding-y: var(--ows-btn-padding-y, 0.5rem) !important;
	--gf-ctrl-btn-padding-x: var(--ows-btn-padding-x, 1rem) !important;
	--gf-ctrl-btn-font-family: var(--ows-btn-font-family, var(--e-global-typography-text-font-family, sans-serif)) !important;
	--gf-ctrl-btn-font-size: var(--ows-btn-font-size, 1rem) !important;
	--gf-ctrl-btn-font-weight: var(--ows-btn-font-weight, 400) !important;
	--gf-ctrl-btn-font-style: var(--ows-btn-font-style, normal) !important;
	--gf-ctrl-btn-text-transform: var(--ows-btn-text-transform, none) !important;
	--gf-ctrl-btn-letter-spacing: var(--ows-btn-letter-spacing, normal) !important;
	--gf-ctrl-btn-line-height: var(--ows-btn-line-height, 1.5) !important;

	/* Fields */
	--gf-ctrl-color: var(--ows-field-color, var(--e-global-color-text, #333)) !important;
	--gf-ctrl-bg-color: var(--ows-field-bg, #fff) !important;
	--gf-ctrl-bg-color-hover: var(--ows-field-bg, #fff) !important;
	--gf-ctrl-bg-color-focus: var(--ows-field-bg-focus, var(--ows-field-bg, #fff)) !important;
	--gf-ctrl-border-style: var(--ows-field-border-style, solid) !important;
	--gf-ctrl-border-width: var(--ows-field-border-width, 1px) !important;
	--gf-ctrl-border-color: var(--ows-field-border-color, #666) !important;
	--gf-ctrl-border-color-hover: var(--ows-field-border-color, #666) !important;
	--gf-ctrl-border-color-focus: var(--ows-field-border-color-focus, var(--e-global-color-primary)) !important;
	--gf-ctrl-radius: var(--ows-field-radius, 3px) !important;
	--gf-ctrl-size: auto !important;
	--gf-ctrl-padding-y: var(--ows-field-padding-y, 0.5rem) !important;
	--gf-ctrl-padding-x: var(--ows-field-padding-x, 1rem) !important;
	--gf-ctrl-textarea-padding-y: var(--ows-field-padding-y, 0.5rem) !important;
	--gf-ctrl-font-family: var(--ows-field-font-family, var(--e-global-typography-text-font-family, sans-serif)) !important;
	--gf-ctrl-font-size: var(--ows-field-font-size, 1rem) !important;
	--gf-ctrl-font-weight: var(--ows-field-font-weight, 400) !important;
	--gf-ctrl-font-style: var(--ows-field-font-style, normal) !important;
	--gf-ctrl-letter-spacing: var(--ows-field-letter-spacing, normal) !important;
	--gf-ctrl-line-height: var(--ows-field-line-height, 1.5) !important;
	--gf-ctrl-placeholder-font-family: var(--ows-field-font-family, var(--e-global-typography-text-font-family, sans-serif)) !important;
	--gf-ctrl-placeholder-font-size: var(--ows-field-font-size, 1rem) !important;

	/* Labels (primary), choice labels (secondary), sub-labels (tertiary), required text, descriptions */
	--gf-ctrl-label-color-primary: var(--ows-label-color, var(--e-global-color-text, #333)) !important;
	--gf-ctrl-label-font-family-primary: var(--ows-label-font-family, var(--e-global-typography-text-font-family, sans-serif)) !important;
	--gf-ctrl-label-font-size-primary: var(--ows-label-font-size, 1rem) !important;
	--gf-ctrl-label-font-weight-primary: var(--ows-label-font-weight, 700) !important;
	--gf-ctrl-label-font-style-primary: var(--ows-label-font-style, normal) !important;
	--gf-ctrl-label-letter-spacing-primary: var(--ows-label-letter-spacing, normal) !important;
	--gf-ctrl-label-line-height-primary: var(--ows-label-line-height, 1.3) !important;
	--gf-ctrl-label-color-secondary: var(--ows-field-color, var(--e-global-color-text, #333)) !important;
	--gf-ctrl-label-font-family-secondary: var(--ows-field-font-family, var(--e-global-typography-text-font-family, sans-serif)) !important;
	--gf-ctrl-label-font-size-secondary: var(--ows-field-font-size, 1rem) !important;
	--gf-ctrl-label-font-weight-secondary: 400 !important;
	--gf-ctrl-label-color-tertiary: var(--ows-field-color, var(--e-global-color-text, #333)) !important;
	--gf-ctrl-label-font-family-tertiary: var(--ows-field-font-family, var(--e-global-typography-text-font-family, sans-serif)) !important;
	--gf-ctrl-label-font-size-tertiary: 0.9rem !important;
	--gf-ctrl-label-color-req: var(--ows-error-color, var(--e-global-color-db3c144, #c02b0a)) !important;
	--gf-ctrl-desc-color: var(--ows-field-color, var(--e-global-color-text, #333)) !important;
	--gf-ctrl-desc-font-family: var(--ows-field-font-family, var(--e-global-typography-text-font-family, sans-serif)) !important;
	--gf-ctrl-desc-font-size: 0.9rem !important;
}

/* Orbital date picker and inline submit buttons (1.4.3)
   - The calendar colours its selected day, today's marker, day borders and hover from --gf-color-in-ctrl-primary and a
     hard-coded #f4f8ff, which the mapping above didn't cover, so they stayed Orbital blue.
   - The calendar's month/year selects have a fixed height but took the shared field padding, which cut their text off.
   - A submit button placed as a field in a row of inputs (e.g. a booking bar) is as tall as the inputs: both control
     sizes are auto above, so heights come from padding (inputs: font size x 1.5 line height + padding + border).
     GF sizes buttons through --gf-local-min-height. */
body .gform-theme--framework:not(.uael-gf-style *) {
	--gf-color-in-ctrl-primary: var(--gf-color-primary) !important;
	--gf-color-in-ctrl-primary-contrast: #fff !important;
	--gf-ctrl-date-picker-cell-content-bg-color-hover: color-mix(in srgb, var(--gf-color-primary) 12%, transparent) !important;
}
body .gform-theme--framework .gform-datepicker-calendar select {
	--gf-local-padding-y: 0 !important;
}
body .gform-theme--framework .gfield--type-submit .button {
	--gf-local-min-height: calc(var(--gf-ctrl-font-size, 1rem) * 1.5 + 2 * var(--gf-ctrl-padding-y, 0.5rem) + 2 * var(--gf-ctrl-border-width, 1px)) !important;
}

/* Gravity Forms 2.5 theme: Theme Style already reaches its button, but GF's own sizes win on fields and labels */
.gform_wrapper.gravity-theme:not(.uael-gf-style *) input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="image"], [type="file"], [type="hidden"]),
.gform_wrapper.gravity-theme:not(.uael-gf-style *) select,
.gform_wrapper.gravity-theme:not(.uael-gf-style *) textarea {
	color: var(--ows-field-color, var(--e-global-color-text, #333));
	background-color: var(--ows-field-bg, #fff);
	border-style: var(--ows-field-border-style, solid);
	border-width: var(--ows-field-border-width, 1px);
	border-color: var(--ows-field-border-color, #666);
	border-radius: var(--ows-field-radius, 3px);
	padding: var(--ows-field-padding, 0.5rem 1rem);
	font-family: var(--ows-field-font-family, var(--e-global-typography-text-font-family, sans-serif));
	font-size: var(--ows-field-font-size, 1rem);
	font-weight: var(--ows-field-font-weight, 400);
	font-style: var(--ows-field-font-style, normal);
	letter-spacing: var(--ows-field-letter-spacing, normal);
	line-height: var(--ows-field-line-height, 1.5);
}
.gform_wrapper.gravity-theme:not(.uael-gf-style *) input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="image"], [type="file"], [type="hidden"]):focus,
.gform_wrapper.gravity-theme:not(.uael-gf-style *) select:focus,
.gform_wrapper.gravity-theme:not(.uael-gf-style *) textarea:focus {
	background-color: var(--ows-field-bg-focus, var(--ows-field-bg, #fff));
	border-color: var(--ows-field-border-color-focus, var(--e-global-color-primary));
}
.gform_wrapper.gravity-theme:not(.uael-gf-style *) .gfield_label,
.gform_wrapper.gravity-theme:not(.uael-gf-style *) legend.gfield_label {
	color: var(--ows-label-color, var(--e-global-color-text, #333));
	font-family: var(--ows-label-font-family, var(--e-global-typography-text-font-family, sans-serif));
	font-size: var(--ows-label-font-size, 1rem);
	font-weight: var(--ows-label-font-weight, 700);
	font-style: var(--ows-label-font-style, normal);
	letter-spacing: var(--ows-label-letter-spacing, normal);
	line-height: var(--ows-label-line-height, 1.3);
}
.gform_wrapper.gravity-theme:not(.uael-gf-style *) .gfield_required {
	color: var(--ows-error-color, var(--e-global-color-db3c144, #c02b0a));
}
/* Theme Style's label font reaches every <label>, so reset choice and sub-labels to the field font */
.gform_wrapper.gravity-theme:not(.uael-gf-style *) .gchoice label,
.gform_wrapper.gravity-theme:not(.uael-gf-style *) .gfield_consent_label,
.gform_wrapper.gravity-theme:not(.uael-gf-style *) .gform-field-label--type-sub,
.gform_wrapper.gravity-theme:not(.uael-gf-style *) .ginput_complex label {
	color: var(--ows-field-color, var(--e-global-color-text, #333));
	font-family: var(--ows-field-font-family, var(--e-global-typography-text-font-family, sans-serif));
	font-size: var(--ows-field-font-size, 1rem);
	font-weight: 400;
	font-style: normal;
	text-transform: none;
	letter-spacing: normal;
}
.gform_wrapper.gravity-theme:not(.uael-gf-style *) .gform-field-label--type-sub,
.gform_wrapper.gravity-theme:not(.uael-gf-style *) .ginput_complex label,
.gform_wrapper.gravity-theme:not(.uael-gf-style *) .gfield_consent_label,
.gform_wrapper.gravity-theme:not(.uael-gf-style *) .gfield_description {
	font-size: 0.9rem;
}
.gform_wrapper.gravity-theme:not(.uael-gf-style *) .gfield_description:not(.validation_message) {
	color: var(--ows-field-color, var(--e-global-color-text, #333));
}

/* Fields with an error keep a red border (Theme Style's field border would otherwise hide it), both themes */
body .gform_wrapper:not(.uael-gf-style *) .gfield_error :is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"]), select, textarea) {
	border-color: var(--ows-error-color, var(--e-global-color-db3c144, #c02b0a));
}

/* Confirmation message (both themes) */
.gform_confirmation_wrapper:not(.uael-gf-style *) .gform_confirmation_message {
	border: 1px solid var(--ows-confirm-border, var(--e-global-color-primary));
	background-color: var(--ows-confirm-bg, var(--e-global-color-44a143f, transparent));
	color: var(--ows-confirm-color, var(--e-global-color-text));
	padding: 1.25rem;
	text-align: center;
}

/* UAE Gravity Forms Styler: hide UAE's extra dropdown arrow (the browser's own arrow still shows) */
.uael-gf-style .uael-gf-select-custom::after {
	display: none;
}



/* SELECT2 STYLE FIXES */

.select2-search--dropdown, .select2-selection__rendered, .select2-search__field, .select2-results {
	background-color: #fff;
	cursor:pointer;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
	border-color: #000 transparent transparent  !important;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
	border-color:  transparent transparent #888 !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	text-align:left;
	cursor:pointer;
}


/* BLOCK CONTENT */

.wp-block-heading strong {
	font-weight: inherit;
}