/*!
Theme Name: MAXconstruction
Theme URI: https://maxconstruction.com
Description: MAXconstruction Theme Powered by UPQU
Author: UPQU
Author URI: https://upqu.com
Template: platformsupport
Version: 1.0.0
Text Domain: platformsupport
*/

 /*- - - - - -HEADER - - - - - - */
 .uicore-header-wrapper { border-top: 8px solid #EF3A42; }
 .uicore-transparent:not(.uicore-scrolled) .uicore-header-wrapper { box-shadow: none !important; }
 .uicore-cta-wrapper .elementor-button-text { font-size: 14px !important; text-transform: uppercase !important; font-weight: 700 !important; }
 
  /*- - - - - -TEXT - - - - - - */
 body,p,.uicore-typo-p { color: inherit !important; }
 
  /*- - - - - -BUTTONS - - - - - - */
.uicore-bl-text { color: #FFF; }
.uicore-bl-text, .elementor-button-text { font-weight: 700 !important; text-transform: uppercase !important; }
.uicore-btn:hover, .uicore-bl-wrp:hover { background: #FFF !important; color: #EF3A42 !important; }
.uicore-bl-wrp:hover .uicore-bl-text { color: #EF3A42 !important; }

  /*- - - - - -FORMS - - - - - - */
.gform-theme--api, .gform-theme--foundation { --gf-form-gap-y: 20px !important; }
.gform-theme--framework .gfield:where(.gfield--type-multiselect,.gfield--input-type-multiselect) .chosen-container-multi:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme--framework .gfield:where(.gfield--type-select,.gfield--input-type-select) .chosen-search input[type=text]:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme--framework .gfield:where(.gfield--type-select,.gfield--input-type-select) .chosen-single:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme--framework .gform-theme-field-control:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme--framework input[type]:where(:not(.gform-text-input-reset):not([type=hidden])):where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme--framework select:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme--framework select[multiple]:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme--framework textarea:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme--framework.gform-theme.gform_wrapper .button:where(:not(.gform-theme-no-framework)):where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme--framework.gform-theme.gform_wrapper .gform-theme-button:where(:not(.gform-theme-no-framework)):where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme--framework.gform-theme.gform_wrapper :where(:not(.mce-splitbtn))>button:not([id*=mceu_]):not(.mce-open):where(:not(.gform-theme-no-framework)):where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme--framework.gform-theme.gform_wrapper button.button:where(:not(.gform-theme-no-framework)):where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme--framework.gform-theme.gform_wrapper input:is([type=submit],[type=button],[type=reset]).button:where(:not(.gform-theme-no-framework)):where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme--framework.gform-theme.gform_wrapper input:is([type=submit],[type=button],[type=reset]):where(:not(.gform-theme-no-framework)):where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme--framework.gform-theme.gform_wrapper input[type=submit].button.gform_button:where(:not(.gform-theme-no-framework)):where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)) { border: none !important; box-shadow: 0 0 0 1px #E6E9EC !important; }
.gform_button { background: #ee3743 !important; transition: all ease-in-out 0.3s !important;  }
.gform_button:hover { opacity: 0.7 !important; }
/*- - - - - -HEADER: FLUID DESKTOP SCALE - - - - - -
 * The header carries a logo, a six-item menu, a native UiCore CTA ("Build
 * Inquiry"), a second button added through the custom area ("Subs / Vendors")
 * and two social buttons. At full size that row needs ~1700px, but the desktop
 * header stays on all the way down to 1025px.
 *
 * Everything below scales as one system between those two widths rather than
 * snapping at breakpoints: a set of custom properties interpolate with the
 * viewport, so the gutter, menu padding, logo and buttons all shrink together
 * and stay in proportion. Only one thing actually changes shape — below
 * --mc-stack-at the two buttons stack, with the social buttons stacking beside
 * them on the same rhythm.
 *
 * Nothing in the row is allowed to shrink below its content or wrap. Letting it
 * (via min-width: 0) is what previously made the buttons overlap each other and
 * the CTA text break onto two lines.
 */

@media (min-width: 1025px) {
	.uicore-navbar {
		/* Linear interpolation across the desktop range: each value is
		   min + (max - min) x the fraction of the way from 1025 to 1900,
		   clamped to its own two ends. Written out per property because CSS
		   cannot divide a length by a length, so the fraction itself is not
		   expressible as a reusable unitless number. */
		--mc-gutter: clamp(20px, calc(20px + 50 * (100vw - 1025px) / 875), 70px);
		--mc-menu-pad: clamp(10px, calc(10px + 15 * (100vw - 1025px) / 875), 25px);
		--mc-logo-h: clamp(44px, calc(44px + 28 * (100vw - 1025px) / 875), 72px);
		/* Matches the theme's Logo Height setting: the branding box holds this
		   height at every width so the header does not change size as the
		   image scales. Update both if that setting changes. */
		--mc-logo-box: 72px;
		--mc-btn-pad-x: clamp(12px, calc(12px + 14 * (100vw - 1025px) / 875), 26px);
		--mc-btn-fs: clamp(11.5px, calc(11.5px + 2.5 * (100vw - 1025px) / 875), 14px);
		--mc-extra-gap: clamp(10px, calc(10px + 15 * (100vw - 1025px) / 875), 25px);

		/* Gap between the stacked buttons, and between the stacked icons, so
		   the two columns share one rhythm and line up row for row. */
		--mc-stack-gap: 8px;

		/* Control height. mc-header.js overwrites this with the CTA's measured
		   height; the fallback keeps things close if the script never runs. */
		--mc-ctrl-h: 53px;
	}

	.uicore-navbar nav.uicore-container {
		padding-left: var(--mc-gutter) !important;
		padding-right: var(--mc-gutter) !important;
	}

	/**
	 * The logo is an inline image sitting on the text baseline of its branding
	 * box, and that box keeps the height of the theme's full-size logo. Once the
	 * image scales below that, the leftover descender space all falls below it
	 * and the logo rides ~5px high of the menu and buttons. Centring it in the
	 * box fixes the alignment; min-height keeps the box — and so the header —
	 * the same height it is today, rather than letting it shrink with the image.
	 */
	.uicore-navbar .uicore-branding {
		display: flex;
		align-items: center;
		min-height: var(--mc-logo-box);
		/* Anchor the absolutely positioned logo variants to this box, so the
		   centring below is measured against the branding rather than whatever
		   positioned ancestor happens to come first. */
		position: relative;
	}

	/* Making the link a flex box blockifies the image inside it, which is what
	   actually takes it off the baseline. Do NOT set display on .uicore-logo
	   itself: the header holds four of them (main, transparent, mobile main,
	   mobile transparent) and UiCore picks one by toggling display: none on the
	   rest — overriding that renders two logos on top of each other. */
	.uicore-navbar .uicore-branding > a {
		display: flex;
		align-items: center;
	}

	.uicore-navbar .uicore-logo {
		height: var(--mc-logo-h) !important;
		width: auto !important;
	}

	/**
	 * Only one logo is a flex child: the variants UiCore cross-fades to (the
	 * white one over a transparent header, and the mobile pair) are absolutely
	 * positioned with inset: 0. Against an explicit height that is
	 * over-constrained, so top wins and they pin to the top of the box — which
	 * is why the transparent header's logo still sat high after the flex fix.
	 * Auto block margins centre them instead.
	 */
	.uicore-navbar .uicore-branding .uicore-logo {
		margin-block: auto;
	}

	/* ---- menu ---- */
	.uicore-navbar .uicore-menu > li > a {
		padding-left: var(--mc-menu-pad) !important;
		padding-right: var(--mc-menu-pad) !important;
	}

	/* The dropdown caret is an absolutely positioned ::after pinned to the
	   item's right padding. Shrinking that padding alone drove it into the
	   next label, so parents get their own 14px lane for it. */
	.uicore-navbar .uicore-menu > li.menu-item-has-children > a {
		padding-right: calc(var(--mc-menu-pad) + 14px) !important;
	}

	.uicore-navbar .uicore-menu > li.menu-item-has-children > a::after {
		right: var(--mc-menu-pad) !important;
		margin-right: 0 !important;
	}

	/* ---- the extras: buttons and socials ---- */
	.uicore-navbar .uicore-extra {
		gap: var(--mc-extra-gap) !important;
	}

	/* No item may shrink past its content or wrap: that is what made the
	   buttons overlap and the CTA break onto two lines. */
	.uicore-navbar .uicore-extra > *,
	.uicore-navbar .uicore-extra .uicore-hca,
	.uicore-navbar .uicore-extra .wp-block-uicore-button {
		flex: 0 0 auto;
		min-width: auto;
	}

	.uicore-navbar .uicore-extra .uicore-btn,
	.uicore-navbar .uicore-extra .uicore-bl-wrp {
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		white-space: nowrap;
		padding-left: var(--mc-btn-pad-x) !important;
		padding-right: var(--mc-btn-pad-x) !important;
	}

	.uicore-navbar .uicore-extra .elementor-button-text,
	.uicore-navbar .uicore-extra .uicore-bl-text {
		font-size: var(--mc-btn-fs) !important;
		white-space: nowrap;
	}

	/* The custom-area button is naturally shorter than the CTA. Matching them
	   is what lets the stacked rows — and the icons beside them — line up.
	   Only this one is pinned: forcing the CTA to a height derived from its own
	   measurement would stop it ever shrinking again. */
	.uicore-navbar .uicore-extra .uicore-custom-area .uicore-bl-wrp {
		min-height: var(--mc-ctrl-h);
	}
}

/* ---- single row: buttons side by side ---- */
@media (min-width: 1440px) {
	.uicore-navbar .uicore-extra .uicore-socials {
		flex-direction: row;
		align-self: center;
	}
}

/* ---- stacked: the row can no longer hold the pair side by side ---- */
@media (min-width: 1025px) and (max-width: 1439px) {
	/* The element carries both classes, so .uicore.uicore-extra outranks
	   UiCore's own !important display:flex, which loads after this file. */
	.uicore-navbar .uicore.uicore-extra {
		display: grid !important;
		grid-template-columns: auto auto;
		grid-template-rows: auto auto;
		align-items: center;
		justify-items: stretch;
		/* align-content, not align-items, decides the row heights: the extras
		   box is as tall as the whole navbar, so without this the two rows
		   split that height and the buttons drift apart. Centring the content
		   sizes each row to its button and honours the 8px gap. */
		align-content: center;
		/* One shorthand, because UiCore sets `gap` with !important — a
		   longhand row-gap here would simply lose to it. */
		gap: var(--mc-stack-gap) var(--mc-extra-gap) !important;
	}

	.uicore-navbar .uicore-extra .uicore-custom-area {
		grid-area: 1 / 1;
	}

	.uicore-navbar .uicore-extra .uicore-cta-wrapper {
		grid-area: 2 / 1;
	}

	/* Both buttons fill the column so the stack reads as one block. */
	.uicore-navbar .uicore-extra .uicore-custom-area,
	.uicore-navbar .uicore-extra .uicore-cta-wrapper,
	.uicore-navbar .uicore-extra .uicore-hca,
	.uicore-navbar .uicore-extra .wp-block-uicore-button,
	.uicore-navbar .uicore-extra .uicore-btn,
	.uicore-navbar .uicore-extra .uicore-bl-wrp {
		width: 100%;
	}

	/* display: contents dissolves the socials wrapper so the two icons become
	   grid items in their own right, landing in column 2 of rows 1 and 2. They
	   then share the buttons' rows outright, which is what makes icon 1 line up
	   with Subs / Vendors and icon 2 with Build Inquiry — a wrapper spanning
	   both rows centres itself against the pair instead, and drifts. */
	.uicore-navbar .uicore-extra .uicore-socials {
		display: contents !important;
	}

	.uicore-navbar .uicore-extra .uicore-socials .uicore-social-icon {
		grid-column: 2;
		align-self: center;
		justify-self: start;
	}
}

/* Mobile slide-out menu: the native CTA renders full width, but the custom-area
 * button shrink-wraps its text and centres, so the pair looked mismatched.
 * Stretch the custom area and its button to match the CTA's inset. */
@media (max-width: 1024px) {
	/* UiCore insets the CTA by calc(10px + 2.5%) — a fixed 20px only lines up
	   at phone widths, so mirror the formula to stay aligned at every size. */
	.uicore-navigation-wrapper .uicore-custom-area {
		width: auto !important;
		margin-left: calc(10px + 2.5%) !important;
		margin-right: calc(10px + 2.5%) !important;
		align-self: stretch;
	}

	.uicore-navigation-wrapper .uicore-custom-area .uicore-hca,
	.uicore-navigation-wrapper .uicore-custom-area .wp-block-uicore-button,
	.uicore-navigation-wrapper .uicore-custom-area .uicore-bl-wrp {
		width: 100% !important;
	}

	.uicore-navigation-wrapper .uicore-custom-area .uicore-bl-wrp {
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
}

/*- - - - - -HEADER SOCIAL BUTTONS - - - - - -
 * UiCore renders these in the header extras, but ahead of the CTA and tagged
 * uicore-only-desktop even inside the mobile menu. These rules re-order them
 * after the buttons, show them on mobile, and give them the square outline.
 */
.uicore-navbar .uicore-socials,
.uicore-navigation-wrapper .uicore-socials {
	display: flex !important;
	flex-direction: row;
	align-items: center;
	flex-wrap: nowrap;
	gap: 8px;
	width: auto;
}

/* Order inside the header extras: Subs/Vendors, Build Inquiry, then socials. */
.uicore-navbar .uicore-extra .uicore-custom-area {
	order: 1;
}

.uicore-navbar .uicore-extra .uicore-cta-wrapper {
	order: 2;
}

.uicore-navbar .uicore-extra .uicore-socials {
	order: 3;
	align-self: center;
}

/**
 * Square, and exactly as tall as the buttons beside them. Stretching to the
 * flex line does not work here: the extras row is as tall as the whole navbar,
 * not the buttons, so the size comes from --mc-ctrl-h, which mc-header.js keeps
 * pinned to the CTA's measured height in every header state.
 */
.uicore-navbar,
.uicore-navigation-wrapper {
	--mc-ctrl-h: 53px;
}

.uicore-navbar .uicore-social-icon,
.uicore-navigation-wrapper .uicore-social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	width: var(--mc-ctrl-h);
	height: var(--mc-ctrl-h);
	flex: none;
	box-sizing: border-box;
	/* The square is sized explicitly and the glyph is centred, so UiCore's own
	   horizontal padding only narrows the box the glyph has to sit in. Needs
	   !important to beat that rule. */
	padding: 0 !important;
	border: 1px solid currentColor;
	border-color: color-mix(in srgb, currentColor 40%, transparent);
	border-radius: 0;
	font-size: clamp(13px, calc(var(--mc-ctrl-h) * 0.32), 16px);
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/**
 * The glyph itself is an icon-font ::before that UiCore ships with a fixed
 * 15x15 box and a 2px top padding — a nudge tuned for its own inline layout.
 * Inside our centred square that padding pushes the ink about 1px low, and the
 * 15px box is narrower than the glyph's 17.6px advance, so the ink overhangs to
 * the right and reads about 1px off-centre. Letting the pseudo size to the
 * glyph puts the ink exactly on the square's centre in both axes.
 */
.uicore-navbar .uicore-social-icon::before,
.uicore-navigation-wrapper .uicore-social-icon::before {
	width: auto;
	height: auto;
	padding: 0;
	line-height: 1;
	/* In the mobile menu the pseudo ends up wider than the glyph; centring the
	   text keeps the ink on the square's axis there too. */
	text-align: center;
}

/* Browsers without color-mix keep a visible border rather than none. */
@supports not (border-color: color-mix(in srgb, currentColor 40%, transparent)) {
	.uicore-navbar .uicore-social-icon,
	.uicore-navigation-wrapper .uicore-social-icon {
		border-color: currentColor;
	}
}

.uicore-navbar .uicore-social-icon:hover,
.uicore-navbar .uicore-social-icon:focus-visible,
.uicore-navigation-wrapper .uicore-social-icon:hover,
.uicore-navigation-wrapper .uicore-social-icon:focus-visible {
	background-color: #ef3a42;
	border-color: #ef3a42;
	color: #fff !important;
}

/* ---- mobile menu: last item, centred under the buttons ---- */
.uicore-navigation-wrapper .uicore-extra .uicore-custom-area {
	order: 1;
}

.uicore-navigation-wrapper .uicore-extra .uicore-cta-wrapper {
	order: 2;
}

.uicore-navigation-wrapper .uicore-socials,
.uicore-navigation-wrapper .uicore-socials.uicore-only-desktop {
	display: flex !important;
	order: 3;
	width: 100% !important;
	justify-content: center;
	align-items: center;
	margin: 24px 0 8px;
}

/* Mobile menu buttons are shorter than the desktop CTA. */
.uicore-navigation-wrapper {
	--mc-ctrl-h: 41px;
}

@media (prefers-reduced-motion: reduce) {
	.uicore-social-icon {
		transition: none;
	}
}