/**
 * Contact Us page (post ID 111). See page-contact-us.php.
 * Colors/sizes originally measured directly against production via
 * headless browser -- not guessed from Elementor's stored JSON. Since
 * simplified (Hero and Map sections removed, 4-card info section
 * replaced with a 3-card "Get in touch!" section) per the client's
 * request -- see MIGRATION.md. Bare-element rules scoped
 * `.cwf-x .cwf-x__thing` throughout, same reason as every other
 * component here (see footer.css).
 */

.cwf-contact-info,
.cwf-contact-form {
	background: var(--color-black);
	padding: 100px 56px 56px;
	text-align: center;
}
.cwf-contact-form {
	padding: 50px 56px;
}

/**
 * Background photo behind "Get in touch!" -- optional (only when
 * contact_bg_image resolves to an actual image, see page-contact-us.php),
 * `position: relative` so the overlay + inner content can stack above
 * it. Same background-size/position/repeat and overlay approach as
 * template-parts/page-hero.php -- not a coincidence, this section's
 * background photo IS the old Hero's photo, just relocated.
 */
.cwf-contact-info {
	position: relative;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
.cwf-contact-info__overlay {
	position: absolute;
	inset: 0;
	background: var(--color-black);
	opacity: 0.7; /* darker than the hero's own 0.3 default -- this section has no separate text-shadow/scrim of its own, so it needs more contrast to keep the white heading/card text and dark card backgrounds readable */
}

.cwf-contact-info__inner {
	position: relative; /* sits above __overlay */
	z-index: 1;
	margin: 0 auto;
}
.cwf-contact-form__inner {
	max-width: 700px; /* was unset -- the form's now-stacked fields (see page-contact-us.php) stretched to the full section width with nothing to stop them; 700px matches this page's existing text max-width (.cwf-contact-info__text/.cwf-contact-form__text) for a consistent, narrower column, per the client's request */
	margin: 0 auto;
}

.cwf-contact-info .cwf-contact-info__heading,
.cwf-contact-form .cwf-contact-form__heading {
	margin: 0 0 20px;
	font-family: var(--font-nav-title); /* Inter, measured -- matches .cwf-hero__heading */
	font-size: 60px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--color-white);
	text-transform: capitalize;
}

.cwf-contact-info .cwf-contact-info__text,
.cwf-contact-form .cwf-contact-form__text {
	max-width: 700px;
	margin: 0 auto 20px;
	font-family: var(--font-nav-title); /* Inter */
	font-size: 20px;
	line-height: 1.5;
	color: var(--color-white);
}

.cwf-contact-cards {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	margin-top: 40px; /* replaces the old __email link's margin-bottom now that it's gone -- same gap between the intro text and the cards */
}

.cwf-contact-cards .cwf-contact-cards__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
	width: 267px;
	padding: 20px;
	background: var(--color-bg-dark-1); /* measured: #141414 */
	border-radius: 10px;
}

.cwf-contact-cards .cwf-contact-cards__icon {
	color: var(--color-primary); /* unified site yellow, was #F5C542 */
}
.cwf-contact-cards .cwf-contact-cards__icon svg {
	width: 30px;
	height: 30px;
}

.cwf-contact-cards .cwf-contact-cards__title {
	margin: 0;
	font-family: var(--font-nav-title); /* Inter */
	font-size: 20px;
	font-weight: 600;
	color: var(--color-white);
	text-transform: capitalize;
}

.cwf-contact-cards .cwf-contact-cards__desc {
	margin: 0;
	font-family: var(--font-nav-title); /* Inter */
	font-size: 18px;
	color: var(--color-text); /* measured: #D0D0D0 */
}
.cwf-contact-cards .cwf-contact-cards__desc a {
	color: inherit;
	text-decoration: none;
}
.cwf-contact-cards .cwf-contact-cards__desc a:hover {
	color: var(--color-primary);
}

/**
 * Card action button (Call!/Send Message!/Email!) -- new, per the
 * client's screenshot reference. Same yellow-fill/black-text/no-border
 * style as the site's one other solid button
 * (page-social-media-content.css's .cwf-cta-block__btn), reusing the
 * same --button-radius/--button-padding tokens for consistency.
 */
.cwf-contact-cards .cwf-contact-cards__btn {
	display: inline-block;
	margin-top: 5px;
	padding: var(--button-padding);
	background: var(--color-primary);
	color: var(--color-black);
	font-family: var(--font-nav-title);
	font-size: 15px;
	font-weight: var(--fw-button);
	text-decoration: none;
	border-radius: var(--button-radius);
}
.cwf-contact-cards .cwf-contact-cards__btn:hover {
	background: var(--color-white);
}

.cwf-contact-form__form {
	margin-top: 20px;
	text-align: left;
}

/**
 * Contact Form 7 field styling (replaces MetForm form 94, 2026-08-25 --
 * see page-contact-us.php). Values below aren't guessed: pulled from
 * MetForm's own Elementor-generated CSS for that form
 * (wp-content/uploads/elementor/css/post-94.css), which resolved to
 * this theme's own --color-bg-dark-1 (#141414), --color-primary
 * (#F5FF00), --color-white and --color-text (#D0D0D0) tokens already --
 * not a coincidence, this site's Elementor Kit and this theme's CSS
 * were unified to the same palette earlier in the migration (see
 * MIGRATION.md's "yellow accent color changed" entry).
 */
.cwf-contact-form__form .wpcf7-form p {
	margin: 0 0 12px;
}
.cwf-contact-form__form .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}
.cwf-contact-form__form input[type="text"],
.cwf-contact-form__form input[type="email"],
.cwf-contact-form__form input[type="tel"],
.cwf-contact-form__form textarea {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 12px 20px;
	background: var(--color-bg-dark-1); /* measured: #141414, same as .cwf-contact-cards__card */
	border: none;
	border-radius: 10px;
	font-family: var(--font-nav-title); /* Inter */
	font-size: 16px;
	color: var(--color-white);
}
.cwf-contact-form__form textarea {
	min-height: 140px;
	resize: vertical;
}
.cwf-contact-form__form ::placeholder {
	color: var(--color-text); /* measured: #D0D0D0 */
	opacity: 1;
}
.cwf-contact-form__form input:focus-visible,
.cwf-contact-form__form textarea:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}
.cwf-contact-form__form .wpcf7-spinner {
	display: none; /* MetForm's own submit spinner wasn't visually present either */
}
.cwf-contact-form__form input[type="submit"] {
	display: inline-block;
	padding: 15px 30px;
	background: var(--color-primary);
	color: var(--color-black);
	font-family: var(--font-nav-title);
	font-size: 14px;
	font-weight: 500;
	text-transform: uppercase;
	line-height: 1.4;
	letter-spacing: 0.02em;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	transition: background-color 0.2s;
}
.cwf-contact-form__form input[type="submit"]:hover {
	background: var(--color-white);
}
.cwf-contact-form__form .wpcf7-not-valid-tip {
	margin-top: 6px;
	font-size: 13px;
	color: var(--color-primary);
}
.cwf-contact-form__form .wpcf7-response-output {
	margin-top: 20px;
	padding: 15px 20px;
	border-radius: 10px;
	border-color: var(--color-bg-dark-1);
	color: var(--color-white);
	font-family: var(--font-nav-title);
}

@media (max-width: 900px) {
	.cwf-contact-info,
	.cwf-contact-form {
		padding-left: 20px;
		padding-right: 20px;
	}
	.cwf-contact-cards .cwf-contact-cards__card {
		width: 100%;
		max-width: 320px;
	}
	.cwf-contact-info .cwf-contact-info__heading,
	.cwf-contact-form .cwf-contact-form__heading {
		/* Found via the same narrow-viewport sweep as Drone's heading
		   fix -- "HIRING & INTERNSHIP INQUIRIES" at 60px (362px measured
		   for "INTERNSHIP" alone) overflowed its 280px container on a
		   320px viewport. No inline style here (this heading's size
		   isn't a per-instance arg like page-hero.php's), so no
		   !important needed. clamp() with a vw-based middle value scales
		   continuously with viewport instead of a single fixed size --
		   same reasoning as hero.css/split-section.css's equivalent
		   fixes, see MIGRATION.md. */
		font-size: clamp(24px, calc(13vw - 5px), 60px);
	}
}