/*
Theme Name: Connect Agency Custom Theme
Description: Custom theme based on Hello Elementor
Author: Connect
Author URI: https://theconnectagency.com
Template: hello-elementor
Version: 6.1
Text Domain: connectbase
*/


/* GLOBAL */

html { scroll-behavior: smooth; }
body {
	display:block;
	max-width:100%;
	height:auto;
	overflow-x: hidden; }
[type=button], [type=submit], button { border: inherit; } /* drops reset.css's pink border unless Theme Style › Buttons sets one */
.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;
	}
}

.disclaimer {
	font-size:0.8rem;
	line-height:1.1em;
	font-style:italic;
	margin-bottom:0 !important;
}

/* ACCESSIBILITY */

@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;
}

.screen-reader-text, .skipLink {
    border: 0;
    border-radius: 0;
    clip: rect(1px,1px,1px,1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    overflow: hidden;
    padding: 0;
    position: absolute;
    height: 1px;
    width: 1px;
    margin: -1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus, .skipLink:focus  {
    background-color: #efefef !important;
    clip: none !important;
    -webkit-clip-path: none;
    clip-path: none;
    color: #101010 !important;
    display: block;
    font-size: 1rem;
    font: message-box;
    text-decoration: none;
    line-height: normal;
    padding: 12px 20px !important;
    left: 5px;
    top: 5px;
    height: auto;
    width: auto;
    min-width: 230px;
    z-index: 100000;
}

.hideElement {
    border: 0;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.hideElement-focusable:active,
.hideElement-focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}


/* 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;
}


/* 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"). rcweb_gf_theme_style_vars() in functions.php publishes
   those settings as --rcweb-btn-*, --rcweb-field-* and --rcweb-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(--rcweb-btn-bg, var(--e-global-color-primary)) !important;
	--gf-ctrl-btn-bg-color-hover-primary: var(--rcweb-btn-bg-hover, var(--rcweb-btn-bg, var(--e-global-color-primary))) !important;
	--gf-ctrl-btn-bg-color-focus-primary: var(--rcweb-btn-bg-hover, var(--rcweb-btn-bg, var(--e-global-color-primary))) !important;
	--gf-ctrl-btn-color-primary: var(--rcweb-btn-color, #fff) !important;
	--gf-ctrl-btn-color-hover-primary: var(--rcweb-btn-color-hover, var(--rcweb-btn-color, #fff)) !important;
	--gf-ctrl-btn-color-focus-primary: var(--rcweb-btn-color-hover, var(--rcweb-btn-color, #fff)) !important;
	--gf-ctrl-btn-border-style-primary: var(--rcweb-btn-border-style, solid) !important;
	--gf-ctrl-btn-border-width-primary: var(--rcweb-btn-border-width, 0) !important;
	--gf-ctrl-btn-border-color-primary: var(--rcweb-btn-border-color, transparent) !important;
	--gf-ctrl-btn-border-color-hover-primary: var(--rcweb-btn-border-color-hover, var(--rcweb-btn-border-color, transparent)) !important;
	--gf-ctrl-btn-border-color-focus-primary: var(--rcweb-btn-border-color-hover, var(--rcweb-btn-border-color, transparent)) !important;
	--gf-ctrl-btn-radius: var(--rcweb-btn-radius, 3px) !important;
	--gf-ctrl-btn-size: auto !important;
	--gf-ctrl-btn-padding-y: var(--rcweb-btn-padding-y, 0.5rem) !important;
	--gf-ctrl-btn-padding-x: var(--rcweb-btn-padding-x, 1rem) !important;
	--gf-ctrl-btn-font-family: var(--rcweb-btn-font-family, var(--e-global-typography-text-font-family, sans-serif)) !important;
	--gf-ctrl-btn-font-size: var(--rcweb-btn-font-size, 1rem) !important;
	--gf-ctrl-btn-font-weight: var(--rcweb-btn-font-weight, 400) !important;
	--gf-ctrl-btn-font-style: var(--rcweb-btn-font-style, normal) !important;
	--gf-ctrl-btn-text-transform: var(--rcweb-btn-text-transform, none) !important;
	--gf-ctrl-btn-letter-spacing: var(--rcweb-btn-letter-spacing, normal) !important;
	--gf-ctrl-btn-line-height: var(--rcweb-btn-line-height, 1.5) !important;

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

	/* Labels (primary), choice labels (secondary), sub-labels (tertiary), required text, descriptions */
	--gf-ctrl-label-color-primary: var(--rcweb-label-color, var(--e-global-color-text, #333)) !important;
	--gf-ctrl-label-font-family-primary: var(--rcweb-label-font-family, var(--e-global-typography-text-font-family, sans-serif)) !important;
	--gf-ctrl-label-font-size-primary: var(--rcweb-label-font-size, 1rem) !important;
	--gf-ctrl-label-font-weight-primary: var(--rcweb-label-font-weight, 700) !important;
	--gf-ctrl-label-font-style-primary: var(--rcweb-label-font-style, normal) !important;
	--gf-ctrl-label-letter-spacing-primary: var(--rcweb-label-letter-spacing, normal) !important;
	--gf-ctrl-label-line-height-primary: var(--rcweb-label-line-height, 1.3) !important;
	--gf-ctrl-label-color-secondary: var(--rcweb-field-color, var(--e-global-color-text, #333)) !important;
	--gf-ctrl-label-font-family-secondary: var(--rcweb-field-font-family, var(--e-global-typography-text-font-family, sans-serif)) !important;
	--gf-ctrl-label-font-size-secondary: var(--rcweb-field-font-size, 1rem) !important;
	--gf-ctrl-label-font-weight-secondary: 400 !important;
	--gf-ctrl-label-color-tertiary: var(--rcweb-field-color, var(--e-global-color-text, #333)) !important;
	--gf-ctrl-label-font-family-tertiary: var(--rcweb-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(--e-global-color-db3c144, #c02b0a) !important;
	--gf-ctrl-desc-color: var(--rcweb-field-color, var(--e-global-color-text, #333)) !important;
	--gf-ctrl-desc-font-family: var(--rcweb-field-font-family, var(--e-global-typography-text-font-family, sans-serif)) !important;
	--gf-ctrl-desc-font-size: 0.9rem !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(--rcweb-field-color, var(--e-global-color-text, #333));
	background-color: var(--rcweb-field-bg, #fff);
	border-style: var(--rcweb-field-border-style, solid);
	border-width: var(--rcweb-field-border-width, 1px);
	border-color: var(--rcweb-field-border-color, #666);
	border-radius: var(--rcweb-field-radius, 3px);
	padding: var(--rcweb-field-padding, 0.5rem 1rem);
	font-family: var(--rcweb-field-font-family, var(--e-global-typography-text-font-family, sans-serif));
	font-size: var(--rcweb-field-font-size, 1rem);
	font-weight: var(--rcweb-field-font-weight, 400);
	font-style: var(--rcweb-field-font-style, normal);
	letter-spacing: var(--rcweb-field-letter-spacing, normal);
	line-height: var(--rcweb-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(--rcweb-field-bg-focus, var(--rcweb-field-bg, #fff));
	border-color: var(--rcweb-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(--rcweb-label-color, var(--e-global-color-text, #333));
	font-family: var(--rcweb-label-font-family, var(--e-global-typography-text-font-family, sans-serif));
	font-size: var(--rcweb-label-font-size, 1rem);
	font-weight: var(--rcweb-label-font-weight, 700);
	font-style: var(--rcweb-label-font-style, normal);
	letter-spacing: var(--rcweb-label-letter-spacing, normal);
	line-height: var(--rcweb-label-line-height, 1.3);
}
.gform_wrapper.gravity-theme:not(.uael-gf-style *) .gfield_required {
	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(--rcweb-field-color, var(--e-global-color-text, #333));
	font-family: var(--rcweb-field-font-family, var(--e-global-typography-text-font-family, sans-serif));
	font-size: var(--rcweb-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(--rcweb-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(--e-global-color-db3c144, #c02b0a);
}

/* Confirmation message (both themes) */
.gform_confirmation_wrapper:not(.uael-gf-style *) .gform_confirmation_message {
	border: 1px solid var(--e-global-color-primary);
	background-color: var(--e-global-color-44a143f, transparent);
	color: var(--e-global-color-text);
	padding: 1rem;
	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;
}


/* CUSTOM LIST STYLES - UPDATE TO MATCH SITE DESIGN */

.customList ul, .customList ol {
    margin: 0 0 1rem -0.5rem;
}

.customList li {
    margin-top: 2px;
    margin-bottom: 2px;
}

.customList ul {
    list-style: none;
}

.customList ul li::before {
  content: "\2014";
  color: var( --e-global-color-accent );
  font-weight: normal;
  display: inline-block;
  width: 1.5em;
  margin-left: -1.5em;
}

.customList .wp-block-columns {
    margin-bottom: 0.25rem;
}

@media only screen and (min-width:990px) {
    /* Two-column list: add the class to the list itself or to the widget holding it. */
    ul.twoColumnList, .twoColumnList ul {
    -moz-column-count: 2;
    -moz-column-gap: 20px;
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    column-count: 2;
    column-gap: 20px;
    margin-top:10px;
}
}


/* BUTTONS IN HORIZONTAL NAVIGATION MENUS - UPDATE TO MATCH SITE DESIGN */

.elementor-nav-menu--layout-horizontal .menuButton .elementor-item {
	padding: 8px 16px !important;
	color: #ffffff !important;
	background-color: var( --e-global-color-primary );
	border-radius: 5px;
	text-transform: uppercase !important;
	font-size: 1.1rem !important;
	font-weight: 500 !important;
}

.elementor-nav-menu--layout-horizontal .menuButton .elementor-item:hover {
	background-color: var( --e-global-color-secondary );
}

.elementor-nav-menu--layout-horizontal .menuButton .elementor-item:before,
.elementor-nav-menu--layout-horizontal .menuButton .elementor-item:after {
	display:none;
	}

.menuIcon i {
	padding: 2px 0 0 8px;
}


/* GENERAL */

.elementor-post__excerpt p:after {
	content:"...";
}

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