/* ---------------------------------------------------------------------------
   Asphalt Express — Elementor compatibility layer.

   The pages are built with Elementor containers/widgets that carry the original
   CodeStitch class names, so the original stylesheets do the design work. This
   file removes the Elementor defaults that would otherwise fight them.
   ------------------------------------------------------------------------ */

/* 1. Let Elementor containers be plain blocks unless the original CSS says
      otherwise — the original rules are ID-scoped so they always win. */
/* Elementor drives container layout through CSS variables on `.e-con`
   (specificity 0,1,0). Resetting the resolved properties at 0,2,0 gives every
   container plain-<div> defaults, while the original stylesheet's ID-scoped
   rules (1,x,0) still win wherever the design actually specifies layout. */
.e-con.ae-box,
.e-con.e-flex.ae-box,
.e-con.e-grid.ae-box {
	display: block;
	position: static;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: stretch;
	align-content: normal;
	gap: normal;
	width: auto;
	min-width: 0;
	max-width: none;
	min-height: 0;
	height: auto;
	overflow: visible;
}

.e-con,
.e-con-inner {
	--padding-block-start: 0px;
	--padding-block-end: 0px;
	--padding-inline-start: 0px;
	--padding-inline-end: 0px;
	--margin-block-start: 0px;
	--margin-block-end: 0px;
	--margin-inline-start: 0px;
	--margin-inline-end: 0px;
	--gap: 0px;
	--row-gap: 0px;
	--column-gap: 0px;
}

.elementor-section-wrap > .elementor-element,
.elementor > .e-con {
	max-width: none;
}

/* 2. Widgets marked ae-pass hand their layout box to the child element, so the
      real heading/paragraph/link becomes the direct flex child the original
      stylesheet expects. */
.ae-pass,
.ae-pass > .elementor-widget-container {
	display: contents;
}

/* 3. Elementor's typography resets — headings and text must inherit the
      original stylesheet's values instead of Elementor's defaults. */
.elementor-widget-heading .elementor-heading-title {
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
	font-family: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	text-align: inherit;
	color: inherit;
	margin: 0;
	padding: 0;
}

.elementor-widget-text-editor {
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	text-align: inherit;
}

.elementor-widget-text-editor,
.elementor-widget-text-editor p:last-of-type {
	margin-bottom: 0;
}

.elementor-widget-container > p:last-child {
	margin-bottom: 0;
}

/* 4. Images: the original sizes come from the stylesheet, not Elementor. */
.elementor-widget-image .elementor-widget-container,
.elementor-widget-image figure,
.elementor-widget-image a {
	display: contents;
}

.elementor-widget-image img {
	width: auto;
	max-width: 100%;
}

/* 5. Buttons rendered through Elementor keep the original solid-button look. */
.elementor-widget-button .elementor-button {
	background: none;
	padding: 0;
	border-radius: 0;
	font-family: inherit;
}

/* 6. Hello Elementor page wrapper. */
.site-main,
.page-content,
.elementor-page .site-main {
	margin: 0;
	padding: 0;
	max-width: none;
}

.site-header,
.site-footer {
	display: none;
}

/* 7. Gallery “Load More” state used by [ae_gallery]. */
#projects-grid .project-card.ae-hidden {
	display: none;
}

/* .load-more-container / .button-transparent are styled by projects.css —
   nothing to add here beyond making the button clickable as a <button>. */
#projects-gallery .button-transparent {
	cursor: pointer;
	font-family: inherit;
	font-size: 1rem;
}

/* 8. Elementor accordion styled as the original FAQ list. */
.cs-faq-group .e-n-accordion-item,
.cs-faq-group .elementor-accordion-item {
	border: none;
	background: none;
}

/* 9. Contact form: the Elementor Pro form widget wears #cs-form-242 and its
      field groups wear .cs-label, so contact.css owns the layout. Only the
      pieces Elementor renders differently (the raw input/button) are matched
      here to the original .cs-input / .cs-button-solid rules. */
#cs-contact-242 .elementor-form {
	display: contents;
}

#cs-contact-242 .elementor-form .elementor-form-fields-wrapper {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	width: 100%;
	margin: 0;
}

#cs-contact-242 .elementor-field-group > label {
	padding: 0;
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
}

#cs-contact-242 .elementor-field-textual {
	font-size: 1rem;
	width: 100%;
	height: 4rem;
	margin-top: 0.25rem;
	padding-left: 1.25rem;
	color: var(--headerColor);
	background-color: transparent;
	border: 1px solid transparent;
	border-bottom: 1px solid #b4b2c7;
	border-radius: 0;
	box-sizing: border-box;
	transition: border 0.3s;
	box-shadow: none;
}

#cs-contact-242 .elementor-field-textual:hover {
	border: 1px solid var(--primary);
}

#cs-contact-242 .elementor-field-textual::placeholder {
	color: #7d799c;
}

#cs-contact-242 textarea.elementor-field-textual {
	font-family: inherit;
	margin: 0;
	padding-top: 1.25rem;
	min-height: 7.5rem;
	height: 7.5rem;
}

body.dark-mode #cs-contact-242 .elementor-field-textual,
body.dark-mode #cs-contact-242 .elementor-field-group > label {
	background-color: transparent;
	color: var(--bodyTextColorWhite);
}

#cs-contact-242 .elementor-field-type-submit {
	width: 100%;
	justify-content: flex-start;
}

#cs-contact-242 .elementor-button[type="submit"] {
	font-size: 1rem;
	font-weight: 700;
	line-height: clamp(2.875rem, 5.5vw, 3.5rem);
	text-align: center;
	text-decoration: none;
	margin: 0;
	padding: 0 1.5rem;
	min-width: 9.375rem;
	color: #fff;
	background-color: var(--primary);
	border: none;
	border-radius: 0.25rem;
	cursor: pointer;
	transition: background-color 0.3s;
}

#cs-contact-242 .elementor-button[type="submit"]:hover {
	background-color: #000;
}

/* 10. Keep Elementor's editor helpers from shifting the live layout. */
.elementor-element.elementor-absolute,
.elementor-element.elementor-fixed {
	z-index: 5;
}