/* Giant Truss — Contact Us
 *
 * The page itself is built in Elementor so the client can edit the copy, and
 * the look of the hero, the two-column body and the image band is carried by
 * the Elementor element settings. This file only holds what Elementor cannot
 * express:
 *
 *   1. the two-column breakpoint, which has to be 900px — Elementor's own
 *      tablet breakpoint is <=1024px and would collapse the grid at 1024,
 *      where the design still wants two columns;
 *   2. the underline-style form inside the purple card, which comes from the
 *      [gt_contact_form] shortcode rather than from an Elementor widget.
 *
 * Enqueued by inc-contact-form.php on any view that uses the shortcode.
 * Colours come from the theme's :root tokens, with the literal value as a
 * fallback in case this sheet ever loads on its own.
 */

/* --------------------------------------------------------------------------
 * Shared guards. min-width:0 is what lets a flex child shrink below its
 * content — the flex equivalent of grid's minmax(0,1fr) — so a long unbroken
 * string (a pasted URL in the message box, say) can never push the page wide.
 * -------------------------------------------------------------------------- */
.gt-contact-cols,
.gt-contact-col,
.gt-form-wrap {
	box-sizing: border-box;
	min-width: 0;
	max-width: 100%;
}

.gt-contact-hero,
.gt-contact-section,
.gt-contact-band {
	max-width: 100%;
}

.gt-form-wrap {
	position: relative;
}

.gt-form-wrap *,
.gt-form-wrap *::before,
.gt-form-wrap *::after {
	box-sizing: border-box;
}

/* Long words and pasted URLs wrap rather than widen the card. */
.gt-contact-col,
.gt-form-wrap {
	overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
 * Two columns from 900px up. Stacked below that — mobile first.
 *
 * The `body` prefix is there only to out-specify Elementor's own per-element
 * rules (0,2,0) without reaching for !important.
 * -------------------------------------------------------------------------- */
@media ( min-width: 900px ) {

	body .elementor-element.gt-contact-cols {
		--flex-direction: row;

		flex-direction: row;
		align-items: stretch;
	}

	body .elementor-element.gt-contact-col {
		--width: auto;

		width: auto;
		min-width: 0;
	}

	body .elementor-element.gt-contact-col-left {
		flex: 1 1 0;
	}

	body .elementor-element.gt-contact-col-right {
		flex: 1.1 1 0;
	}
}

/* --------------------------------------------------------------------------
 * The dark WhatsApp / distributor buttons.
 * Elementor carries the colour, radius and padding; this only guarantees the
 * 44px minimum tap target and keeps the glyph aligned with the label.
 * -------------------------------------------------------------------------- */
.gt-wa-btn .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	max-width: 100%;
}

.gt-wa-btn .elementor-button-icon svg {
	width: 1.2em;
	height: 1.2em;
	fill: currentColor;
}

/* --------------------------------------------------------------------------
 * The form inside the purple card.
 * The card's background, padding and radius are set on the Elementor
 * container so the client can restyle it; everything below is the form.
 * -------------------------------------------------------------------------- */
.gt-field {
	margin: 0 0 22px;
}

/* Visible placeholders carry the field names in the design, but a placeholder
   is not a label — so the real label stays in the markup for screen readers. */
.gt-field-label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

.gt-form input,
.gt-form textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	min-height: 48px;
	padding: 12px 2px;
	border: 0;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.55 );
	border-radius: 0;
	background: transparent;
	color: #fff;
	font-family: "Inter Tight", Arial, Helvetica, sans-serif;
	/* 16px keeps iOS from zooming the viewport on focus, which is one of the
	   commonest causes of a phone-width horizontal scroll. */
	font-size: var( --gt-t-body, 16px );
	line-height: var( --gt-t-lh, 1.5 );
	-webkit-appearance: none;
	appearance: none;
}

.gt-form textarea {
	min-height: 104px;
	resize: vertical;
}

.gt-form input::placeholder,
.gt-form textarea::placeholder {
	color: rgba( 255, 255, 255, 0.72 );
	opacity: 1;
}

.gt-form input:focus,
.gt-form textarea:focus {
	border-bottom-color: #fff;
	outline: 2px solid rgba( 255, 255, 255, 0.9 );
	outline-offset: 3px;
}

/* Chrome's autofill would otherwise repaint the field white-on-white. */
.gt-form input:-webkit-autofill {
	-webkit-text-fill-color: #fff;
	transition: background-color 100000s ease-in-out 0s;
}

.gt-form-submit {
	display: block;
	width: 100%;
	min-height: 56px;
	margin: 30px 0 0;
	padding: 16px 20px;
	border: 0;
	border-radius: 4px;
	background: #fff;
	color: var( --gt-purple, #7b4ff4 );
	font-family: "Inter Tight", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.gt-form-submit:hover {
	background: #f3efff;
}

.gt-form-submit:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.gt-form-legal {
	margin: 14px 0 0;
	color: rgba( 255, 255, 255, 0.85 );
	font-family: "Inter Tight", Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 1.5;
}

.gt-form-legal a {
	color: #fff;
	text-decoration: underline;
}

/* Validation messages. Amber holds enough contrast against the purple card. */
.gt-form-error {
	display: block;
	margin-top: 6px;
	color: #ffe08a;
	font-family: "Inter Tight", Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 1.4;
}

.gt-field-invalid input,
.gt-field-invalid textarea {
	border-bottom-color: #ffe08a;
}

.gt-form-alert {
	margin: 0 0 20px;
	padding: 12px 14px;
	border-radius: 4px;
	background: rgba( 0, 0, 0, 0.22 );
	color: #fff;
	font-family: "Inter Tight", Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 1.5;
}

.gt-form-sent {
	color: #fff;
	font-family: "Inter Tight", Arial, Helvetica, sans-serif;
}

.gt-form-sent-title {
	margin: 0 0 10px;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
}

.gt-form-sent-body {
	margin: 0;
	font-size: var( --gt-t-body, 16px );
	line-height: var( --gt-t-lh, 1.5 );
	color: rgba( 255, 255, 255, 0.88 );
}

/* Honeypot — hidden from people, left in the DOM for bots to fill in.
   Clipped rather than moved off-canvas, so it can never affect page width. */
.gt-trap {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

/* GT: contact form 7 skin --------------------------------------------------
   CF7 replaces the custom form, so its own markup needs the card treatment:
   underline fields on the purple panel, white full-width submit.
   -------------------------------------------------------------------------- */
.gt-contact-col-right .wpcf7 { color: #fff; }
.gt-contact-col-right .wpcf7 p { margin: 0 0 22px; }
.gt-contact-col-right .wpcf7 .wpcf7-form-control-wrap { display: block; }
.gt-contact-col-right .wpcf7 input[type="text"],
.gt-contact-col-right .wpcf7 input[type="tel"],
.gt-contact-col-right .wpcf7 input[type="email"],
.gt-contact-col-right .wpcf7 textarea {
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .55);
  border-radius: 0;
  color: #fff;
  font-family: inherit;
  font-size: 16px;            /* 16px stops iOS zooming on focus */
  line-height: 1.5;
  padding: 12px 0;
  min-height: 48px;
  outline: none;
  transition: border-color .2s;
}
.gt-contact-col-right .wpcf7 textarea { min-height: 110px; resize: vertical; }
.gt-contact-col-right .wpcf7 ::placeholder { color: rgba(255, 255, 255, .78); opacity: 1; }
.gt-contact-col-right .wpcf7 input:focus,
.gt-contact-col-right .wpcf7 textarea:focus { border-bottom-color: #fff; }
.gt-contact-col-right .wpcf7 input[type="submit"] {
  width: 100%;
  min-height: 56px;
  background: #fff;
  color: var(--gt-purple, #7B4FF4);
  border: 0;
  border-radius: 4px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.gt-contact-col-right .wpcf7 input[type="submit"]:hover { background: #f1ecff; }
/* CF7's own status/validation messaging, legible on purple */
.gt-contact-col-right .wpcf7 .wpcf7-not-valid-tip { color: #ffe1e1; font-size: 13px; }
.gt-contact-col-right .wpcf7-response-output {
  border-color: rgba(255,255,255,.6) !important;
  color: #fff;
  margin: 14px 0 0 !important;
  padding: 10px 12px !important;
  font-size: 14px;
}
.gt-contact-col-right .wpcf7-spinner { background-color: rgba(255,255,255,.7); }
@media (max-width: 575px) {
  .gt-contact-col-right .wpcf7 p { margin-bottom: 18px; }
}
/* GT: end contact form 7 skin */